CSS animation-timing-function Özelliği

Tanım ve Kullanım

animation-timing-function Animasyonun hız eğrisini belirtin.

Hız eğrisi, animasyonun bir CSS stiliyle bir başka stiline geçiş yaparken kullanılan süreyi tanımlar.

Hız eğrisi, değişikliklerin daha pürüzsüz olmasını sağlamak için kullanılır.

Ayrıca bkz.:

CSS3 Eğitimi:CSS Animasyon

HTML DOM Referans Kılavuzu:animationTimingFunction özelliği

Örnek

Örnek 1

Animasyonun başlangıçtan sonuna kadar aynı hızda oynatılması:

div
{
animation-timing-function:2s;
}

Kişisel Deneyim

Örnek 2

Farklı zamanlayıcı fonksiyon değerlerini daha iyi anlamak için, beş farklı değerli beş farklı div elementi sağlanmıştır:

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Kişisel Deneyim

Örnek 3

Önceki örnekle aynı, ancak hız eğrisini cubic-bezier fonksiyonu ile tanımlar:

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Kişisel Deneyim

CSS dilbilgisi

animation-timing-function: değer;

animation-timing-function, matematiksel bir fonksiyon olan adlandırılmış üçgen bezier fonksiyonunu kullanarak hız eğrisi oluşturur. Bu fonksiyonda kendi değerlerinizi kullanabilir, ayrıca önceden tanımlanmış değerleri de kullanabilirsiniz:

Değer Açıklama test
linear Animasyonun başından sonuna kadar hızı aynıdır. test
hafif Öntanımlı. Animasyon düşük hızla başlar, ardından hızlanır ve bitimden önce yavaşlar. test
ease-in Animasyon düşük hızla başlar. test
ease-out Animasyon düşük hızla sona erer. test
ease-in-out Animasyon düşük hızla başlar ve sona erer. test
cubic-bezier(n,n,n,n) cubic-bezier fonksiyonunda kendi değerlerinizi girin. Olası değerler 0'dan 1'e kadar olan sayılardır.

İpucu:Aşağıdaki "Kişisel Deneyim" fonksiyonunda farklı değerleri kullanmayı deneyin.

Teknik ayrıntılar

Öntanımlı değer: hafif
Mirasçılık: hayır
Sürüm: CSS3
JavaScript dilbilgisi: nesne.style.animationTimingFunction="linear"

Tarayıcı desteği

Tablo içindeki sayılar, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü belirtir.

Ile -webkit-、-moz- veya -o- olan sayılar, öne eklenmiş ilk sürümü kullanır.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-