Örnek
bir geçiş etkisi hız eğrisi değiştirin:
document.getElementById("myDIV").style.transitionTimingFunction = "linear";
Kendin dene " Tanımı ve Kullanımı
transitionTimingFunction ö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.
Tarayıcı Desteği
transitionTimingFunction özellik Internet Explorer 10, Firefox, Opera ve Chrome desteklenir.
Safari alternatif, WebkitTransitionTimingFunction özelliğini destekler.
Not: transitionTimingFunction özelliği Internet Explorer 9 ve önceki sürümlerde desteklenmez.
Sözdizimi
transitionTimingFunction özelliğini Dönüş:
object .style.transitionTimingFunction transitionTimingFunction özelliğini ayarlayın:
object .style.transitionTimingFunction ="ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
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 (cubic- eşdeğer bezier(0.42,0,1,1) ) |
| ease-out | Yavaş ucu olan bir geçiş etkisi belirtir (cubic- eşdeğer bezier(0,0,0.58,1) ) |
| ease-in-out | Yavaş bir başlangıç ve bitiş ile bir geçiş etkisini belirtir (cubic- eşdeğer bezier(0.42,0,0.58,1) ) |
| 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 |
Teknik detaylar
| Varsayılan değer: | kolaylaştırmak |
|---|---|
| Geri dönüş değeri: | bir elemanın geçiş zamanlama işlevi özelliğini temsil eden bir String, |
| CSS Sürüm | CSS3 |
İlgili Sayfalar
CSS referans: transition-timing-function property
<Stil Nesne