Giriş yap

CSS animation-timing-function Özelliği

Animasyonun hız eğrisini belirler. Bu sayede animasyon oynatılırken nasıl bir akışta oynatılacağı belirlenir, belli başlı zamanlama fonksiyonları hariç kendinizde özel olarak cubic-bezier() kullanarak hız eğrisini oluşturabilirsiniz.

Yapısı (Syntax)animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(sayı, start | end) | cubic-bezier(n,n,n,n)

Varsayılan Değer ease
JavaScript Yapısı object.style.animationTimingFunction="linear"
Animasyon Özellikleri Uygulanabilir Hayır (Daha fazla detay)

Değerler

Değer Açıklama Versiyon
linear Animasyon başlangıçtana bitişe kadar aynı hızda oynar.
ease Varsayılan değerdir. Animasyon yavaş başlar, hızlanır ve yine yavaş biter.
ease-in Animasyon yavaş başlar.
ease-out Animasyon yavaş biter.
ease-in-out Animasyon yavaşlar başlar, yavaş biter.
step-start steps(1, start) değerine eşittir
step-end steps(1, end) değerine eşittir
steps(sayı, start | end) Adımlı olarak animasyonu çalıştırır, animasyon akmaz belirlenen sayıya göre bölerek çalışır.
cubic-bezier(n,n,n,n) Özel hız eğrisi oluşturmak için kullanılır

Örnekler

Tüm fonksiyonların bir arada kullanıldığı örnek

<div class="box"></div>
<div class="box timing-ease-in">ease-in</div>
<div class="box timing-ease-out">ease-out</div>
<div class="box timing-ease-in-out">ease-in-out</div>
<div class="box timing-linear">linear</div>
<div class="box timing-step-start">step-start</div>
<div class="box timing-step-end">step-end</div>
<div class="box timing-steps-start">steps(4, start)</div>
<div class="box timing-steps-end">steps(4, end)</div>
<div class="box timing-custom">steps(4, end)</div>

<style>
    .box {
        width: 100px;
        height: 60px;
        margin-bottom: 10px;
        background: blue;
        position: relative;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        animation: boxAnimation 1s infinite alternate;
    }
    .box.timing-ease-in {
        animation-timing-function: ease-in;
    }
    .box.timing-ease-out {
        animation-timing-function: ease-out;
    }
    .box.timing-ease-in-out {
        animation-timing-function: ease-in-out;
    }
    .box.timing-linear {
        animation-timing-function: linear;
    }
    .box.timing-step-start {
        animation-timing-function: step-start;
    }
    .box.timing-step-end {
        animation-timing-function: step-end;
    }
    .box.timing-steps-start {
        animation-timing-function: steps(4, start);
    }
    .box.timing-steps-end {
        animation-timing-function: steps(4, end);
    }
    .box.timing-custom {
        animation-timing-function: cubic-bezier(0.105, 1.345, 0.790, -0.105);
    }
    @keyframes boxAnimation {
        from {left: 0}
        to {left: 250px}
    }
</style>

tayfunerbilen
341 gün önce eklendi.
Github'da Düzenle
Önemli Başlıklar