animation-timing-function Özelliği

animation-timing-function özelliği, animasyonun değişim hızını (ivmesini) ayarlar. Örneğin, önce yavaş, sonra hızlı, sonra yavaş vb.

Sözdizimi

seçici {
	animation-timing-function: değer;
}

Değer	Açıklama
`ease`	Önce yavaş, sonra hızlı, sonunda tekrar yavaş.
`ease-in`	Yavaş başlar ve kademeli olarak hızlanır.
`ease-out`	Hızlı başlar ve kademeli olarak yavaşlar.
`ease-in-out`	Önce yavaş, sonra hızlı, sonunda tekrar yavaş. Ease'den hız olarak farklılık gösterir.
`linear`	Her zaman aynı hız.
`step-start`	Animasyon yoktur, özellik hemen son değeri alır.
`step-end`	Animasyon yoktur, özellik, `animation-duraton` içinde belirlenen süreyi bekler, ardından anında son değeri alır.
`steps`	Özelliğin değeri adımlarla (sıçramalarla) değişir.
`cubic-bezier`	Keyfi bir animasyon tanımlayabilen Bezier eğrisi. Bkz. Bezier eğrisi oluşturucu.

Varsayılan değer: ease.

Tüm zamanlama fonksiyonu türlerinin çalışmasını görmek için aşağıda sunulan blokların üzerine fareyle gelin:

animasyonlar için kısayol özellik olan animation özelliği
animasyonun kare kare tanımını yapan @keyframes komutu
bir öğenin üzerine gelindiğinde animasyon oluşturan transition yumuşak geçişler