Style animationTimingFunction özelliği

Tanım ve kullanım

animationTimingFunction Animasyonun hız eğrisini belirtin.

Hız eğrisi, animasyonun bir grup CSS stillerinden bir diğerine geçiş süresini tanımlar.

Hız eğrisi, pürüzsüz değişimler için kullanılır.

Örnek

<div> elementinin animationTimingFunction özelliğini değiştirin:

document.getElementById("myDIV").style.animationTimingFunction = "linear";

Kişisel olarak deneyin

Sözdizimi

animationTimingFunction özelliğini döndürün:

nesne.style.animationTimingFunction

animationTimingFunction özelliğini ayarlayın:

nesne.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

Özellik değeri

Değer Tanım
linear Animasyon başından sonuna kadar aynı hızdadır.
ease Öntanımlı değer. Animasyon yavaş başlar, ardından hızlanır, ardından yavaş sona erer.
ease-in Animasyon yavaş başlar.
ease-out Animasyon yavaş sona erer.
ease-in-out Animasyon hem yavaş başlar hem de yavaş sona erer.
cubic-bezier(n, n, n, n)

Üç katlı Bezier fonksiyonunda kendi değerlerinizi tanımlayın.

Mümkün olan değerler 0'dan 1'e kadar olan sayılardır.
initial Bu özelliği öntanımlı değerine ayarlayın. Ayrıca bakınız initial.
inherit Bu özelliği ebeveyn elementinden miras alır. Ayrıca bakınız inherit.

Teknik ayrıntılar

Öntanımlı değer: ease
Dönüş değeri: Dizge, elementin animation-timing-function özelliği.
CSS sürümü: CSS3

Tarayıcı desteği

animationTimingFunction CSS3 (1999) özelliğidir.

Tüm tarayıcılar onu tamamen destekler:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Destek Destek Destek Destek Destek 11

İlgili sayfa

CSS referans el kitabı:animation-timing-function özelliği