Contoh
Sebuah efek transisi dengan kecepatan yang sama dari awal sampai akhir:
div {
-webkit-transition-timing-function: linear; /* Safari and Chrome */
transition-timing-function: linear;
}
Cobalah sendiri " Definisi dan Penggunaan
Properti transisi-waktu-fungsi menentukan kurva kecepatan efek transisi.
Properti ini memungkinkan efek transisi untuk mengubah kecepatan lebih dari durasi.
| nilai default: | ease |
|---|---|
| mewarisi: | no |
| animatable: | no. Read about animatable |
| Versi: | CSS3 |
| sintaks JavaScript: | object .style.transitionTimingFunction="linear" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit-, moz atau -o- menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| 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 Syntax
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|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 awal yang lambat dan akhir (setara dengan cubic-bezier(0.42,0,0.58,1) ) |
| step-start | Setara dengan steps(1, start) |
| step-end | Setara dengan steps(1, end) |
| steps(int,start|end) | Menentukan fungsi loncatan, dengan dua parameter. Parameter pertama menentukan jumlah interval dalam fungsi. Ini harus menjadi bilangan bulat positif (greater than 0) . Parameter kedua, yang opsional, adalah baik nilai "start" atau "end" , dan menentukan titik di mana perubahan nilai terjadi dalam interval. Jika parameter kedua dihilangkan, itu diberikan nilai "end" |
| cubic-bezier( n , n , n , n ) | Mendefinisikan 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 |
Tip: Coba nilai yang berbeda pada contoh di bawah untuk memahami cara kerjanya!
Contoh lebih
Contoh
Untuk lebih memahami nilai-nilai fungsi yang berbeda: Berikut adalah lima elemen div berbeda dengan lima nilai yang berbeda:
/* 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;}
Cobalah sendiri " Contoh
Sama seperti contoh di atas, tapi kurva kecepatan yang ditentukan dengan fungsi kubik-bezier:
/* 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);}
Cobalah sendiri " Pages terkait
CSS tutorial: Transisi CSS3
Referensi HTML DOM: transitionTimingFunction property