Contoh
Mengubah kurva kecepatan efek transisi:
document.getElementById("myDIV").style.transitionTimingFunction = "linear";
Cobalah sendiri " Definisi dan Penggunaan
Properti transitionTimingFunction menentukan kurva kecepatan efek transisi.
Properti ini memungkinkan efek transisi untuk mengubah kecepatan lebih durasinya.
Dukungan Browser
Properti transitionTimingFunction didukung di Internet Explorer 10, Firefox, Opera, dan Chrome.
Safari mendukung alternatif, properti WebkitTransitionTimingFunction.
Catatan: Properti transitionTimingFunction tidak didukung di Internet Explorer 9 dan versi sebelumnya.
Sintaksis
Kembali properti transitionTimingFunction:
object .style.transitionTimingFunction Mengatur properti transitionTimingFunction:
object .style.transitionTimingFunction ="ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
Nilai properti
| Nilai | Deskripsi |
|---|---|
| ease | nilai default. Menentukan efek transisi dengan awal yang lambat, kemudian cepat, kemudian berakhir perlahan (equivalent to cubic- bezier(0.25,0.1,0.25,1) ) |
| linear | Menentukan efek transisi dengan kecepatan yang sama dari awal sampai akhir (equivalent to cubic- bezier(0,0,1,1) ) |
| ease-in | Menentukan efek transisi dengan awal yang lambat (setara dengan cubic- bezier(0.42,0,1,1) ) |
| ease-out | Menentukan efek transisi dengan ujung yang lambat (setara dengan cubic- bezier(0,0,0.58,1) ) |
| ease-in-out | Menentukan efek transisi dengan lambat awal dan akhir (setara dengan cubic- bezier(0.42,0,0.58,1) ) |
| cubic- bezier( n , n , n , n ) | Tentukan nilai-nilai Anda sendiri dalam fungsi kubik-bezier. Nilai yang mungkin adalah nilai numerik dari 0 ke 1 |
| initial | Set properti ini ke nilai default. Baca tentang awal |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Rincian teknis
| Nilai default: | meredakan |
|---|---|
| Kembali Nilai: | Sebuah String, yang mewakili properti transisi-waktu-fungsi elemen |
| CSS Versi | CSS3 |
Pages terkait
Referensi CSS: transition-timing-function property
<Style Object