CSS3 properti animasi-waktu-fungsi
contoh
Dari awal sampai akhir dengan kecepatan yang sama memainkan animasi:
-webkit-animation-timing-function:linear; /* Safari and Chrome */
Coba »
Di bagian bawah halaman ini untuk lebih banyak contoh.
Dukungan Browser
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
Tag definisi dan petunjuk
Bagaimana animasi-waktu-fungsi Menentukan animasi akan menyelesaikan siklus.
Kecepatan definisi kurva film dari CSS stylesheet ke dalam jumlah set waktu.
kurva kecepatan digunakan untuk mengubah halus.
| default: | memudahkan |
|---|---|
| warisan: | tidak |
| versi: | CSS3 |
| sintaks JavaScript: | keberatan object.style.animationTimingFunction = "linear" |
tatabahasa
Fungsi matematika animasi-waktu-fungsi penggunaan, disebut kurva Bezier kubik, kurva kecepatan. Dengan fungsi ini, Anda dapat menggunakan nilai-nilai Anda sendiri, atau menggunakan salah satu nilai yang telah ditetapkan:
| nilai | deskripsi | uji |
|---|---|---|
| linear | Animasi dari awal sampai akhir dengan kecepatan yang sama. | uji |
| memudahkan | Default. Anime mulai pada kecepatan rendah, kemudian mempercepat, memperlambat di akhir. | uji |
| kemudahan-in | Animasi dimulai pada kecepatan rendah. | uji |
| kemudahan-out | Animasi pada akhir rendah. | uji |
| kemudahan-in-out | Animasi awal dan akhir pada kecepatan rendah. | uji |
| kubik-bezier (n, n,n, n) | Dalam fungsi kubik-bezier nilai Anda sendiri. Nilai yang mungkin adalah 0-1 nilai. |
Petunjuk: Coba yang berikut ini "mencoba" untuk menggunakan nilai-nilai fungsi yang berbeda.
contoh online
contoh
Untuk lebih memahami nilai-nilai fungsi waktu yang berbeda, disediakan satu set lima nilai yang berbeda dari lima elemen div yang berbeda:
#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;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#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;}
Coba »
contoh
Sama seperti contoh sebelumnya, tetapi ditentukan oleh kurva kecepatan fungsi kubik-bezier:
#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);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#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);}
Coba »
Artikel terkait
CSS3 tutorial: CSS3 Animasi