Örnek
başından sonuna aynı hızda bir animasyon oyna:
div {
-webkit-animation-timing-function: linear; /* Chrome, Safari,
Opera */
animation-timing-function: linear;
} Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
Animasyon-zamanlama-fonksiyon, bir animasyon hız eğrisi belirtir.
hız eğrisi, bir animasyon bir CSS stilleri bir kümesinden değiştirmek için kullandığı saat tanımlar.
hız eğrisi düzgün değişiklik yapmak için kullanılır.
| Varsayılan değer: | ease |
|---|---|
| Miras: | no |
| canlandırılabilir: | no. Read about animatable |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.animationTimingFunction="linear" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -moz-, -webkit- ardından veya önek ile çalıştı ilk sürümü belirtmek -O-.
| özellik | |||||
|---|---|---|---|---|---|
| animation-timing-function | 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- |
CSS sözdizimi
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier( Animasyon-zamanlama fonksiyonlu hız eğrisi yapmak için, Bezier eğrisi adı verilen bir matematiksel fonksiyon kullanır. Bu işlevde kendi değerlerin kullanılması veya önceden tanımlanmış değerlerden birini kullanabilirsiniz:
Mülkiyet Değerler
değer Açıklama Oynat linear Animasyon baştan sona aynı hıza sahiptir Oynat " ease Varsayılan değer. yavaş yavaş sona ermeden animasyon, ardından hızlı, yavaş bir başlangıç vardır Oynat " ease-in animasyon yavaş bir başlangıç vardır Oynat " ease-out Animasyon yavaş ucu Oynat " ease-in-out Animasyon yavaş bir başlangıç ve yavaş ucu hem de sahiptir Oynat " step-start Eşdeğer steps(1, start) step-end Eşdeğer steps(1, end) steps(int,start|end) İki parametrelerle bir adım fonksiyonu belirtir. İlk parametre fonksiyonunda aralıklarla sayısını belirtir. Bu pozitif bir tam sayı olmalıdır (greater than 0) . Isteğe bağlı olan ikinci parametre, bir değer olduğundan "start" ya da "end" , ve değerleri değiştirme aralığı içinde meydana gelen noktayı belirtir. İkinci parametre ihmal edilirse, bu değer verilir "end" cubic- bezier( n , n , n , n ) kübik bezier işlevinde kendi değerlerinizi tanımlayın
Olası değerler 0 ile 1 arasında sayısal değerlerdir initial varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun inherit üst öğesinden bu özelliği devralır. Yaklaşık miras oku
Tip: Aşağıdaki deneyin Yourself bölümünde farklı değerler deneyin.
Diğer Örnekler
Örnek
Daha iyi farklı zamanlama fonksiyonu değerlerini anlamak için;
İşte beş farklı <div> beş farklı değerlere sahip elemanlar:
/* For Chrome, Safari and Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
/* Standard
syntax */
#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;}
Kendin dene "
Örnek
Yukarıdaki örnekte aynı, ancak hız eğrileri kübik Bezier fonksiyonu ile tanımlanmıştır:
/* For Chrome, Safari and Opera */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Standard syntax */
#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);} Kendin dene "
İlgili Sayfalar
CSS3 öğretici: CSS3 Animasyonlar
HTML DOM referansı: animationTimingFunction property