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>

Editörde Görüntüle

Tarayıcı Desteği

	Chrome	Firefox	Edge	Internet Explorer	Opera	Safari
`animation-timing-function`	43 `-webkit-`	16 `-webkit-`	12 `-webkit-`	10	30 `-webkit-`	9 `-webkit-`
`jump`	1	65	79		64	14

Destekliyor

Desteklemiyor

tayfunerbilen

1057 gün önce eklendi - 2627 kez görüntülendi.

Github'da Düzenle