Örnek
baştan sona aynı hızda olan bir geçiş etkisi:
div {
-webkit-transition-timing-function: linear; /* Safari and Chrome */
transition-timing-function: linear;
}
Kendin dene " Tanımı ve Kullanımı
Geçiş-zamanlama fonksiyonlu özelliği geçiş etkisi hız eğrisi belirtir.
Bu özellik, bir geçiş efekti süresi boyunca hızını değiştirmek için izin verir.
| Varsayılan değer: | ease |
|---|---|
| Miras: | no |
| canlandırılabilir: | no. Read about animatable |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.transitionTimingFunction="linear" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -webkit-, -moz- ardından veya önek ile çalıştı ilk sürümü belirtmek -O-.
| özellik | |||||
|---|---|---|---|---|---|
| transition-timing-function | 26,0 4,0 -webkit- | 10.0 | 16.0 4,0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
CSS sözdizimi
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier( Mülkiyet Değerler değer Açıklama ease Varsayılan değer. Yavaş bir başlangıç ile bir geçiş etkisini belirtir, daha sonra hızlı, daha sonra yavaş yavaş sona (equivalent to cubic- bezier(0.25,0.1,0.25,1) ) linear Baştan sona aynı hızda bir geçiş etkisini belirtir (equivalent to cubic- bezier(0,0,1,1) ) ease-in Yavaş bir başlangıç ile bir geçiş etkisini belirtir (eşdeğer cubic- bezier(0.42,0,1,1) ) ease-out Yavaş ucu olan bir geçiş etkisi belirtir (eşdeğer cubic- bezier(0,0,0.58,1) ) ease-in-out Yavaş bir başlangıç ve bitiş ile bir geçiş etkisini belirtir (eşdeğer cubic- bezier(0.42,0,0.58,1) ) 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ğerlerini 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: nasıl çalıştığını anlamak için aşağıdaki örneklerde farklı değerler deneyin!
Diğer Örnekler
Örnek
Daha iyi farklı fonksiyon değerlerini anlamak için: Burada beş farklı değerlerle beş farklı div öğeleri şunlardır:
/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Standard
syntax */
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Kendin dene "
Örnek
Yukarıdaki örnekte aynı, ancak hız eğrileri kübik Bezier fonksiyonu ile belirlenir:
/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Standard syntax */
#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
Kendin dene "
İlgili Sayfalar
CSS öğretici: CSS3 Geçişler
HTML DOM referansı: transitionTimingFunction property