Contoh
Memainkan animasi dengan kecepatan yang sama dari awal sampai akhir:
div {
-webkit-animation-timing-function: linear; /* Chrome, Safari,
Opera */
animation-timing-function: linear;
} Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
Animasi-waktu-fungsi menentukan kurva kecepatan animasi.
Kurva kecepatan mendefinisikan WAKTU animasi menggunakan untuk mengubah dari satu set gaya CSS yang lain.
Kurva kecepatan digunakan untuk membuat perubahan lancar.
| nilai default: | ease |
|---|---|
| mewarisi: | no |
| animatable: | no. Read about animatable |
| Versi: | CSS3 |
| sintaks JavaScript: | object .style.animationTimingFunction="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 | |||||
|---|---|---|---|---|---|
| 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- |
CSS Syntax
animation-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; Animasi-waktu-fungsi menggunakan fungsi matematika, disebut kurva Bezier Cubic, untuk membuat kurva kecepatan. Anda dapat menggunakan nilai-nilai Anda sendiri dalam fungsi ini, atau menggunakan salah satu dari nilai yang telah ditentukan:
Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| linear | animasi memiliki kecepatan yang sama dari awal sampai akhir | Mainkan " |
| ease | nilai default. animasi memiliki awal yang lambat, kemudian cepat, sebelum berakhir perlahan | Mainkan " |
| ease-in | animasi memiliki awal yang lambat | Mainkan " |
| ease-out | animasi memiliki ujung yang lambat | Mainkan " |
| ease-in-out | animasi memiliki kedua awal yang lambat dan akhirnya lambat | Mainkan " |
| 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 di Coba Sendiri bagian bawah.
Contoh lebih
Contoh
Untuk lebih memahami nilai-nilai fungsi waktu yang berbeda;
Berikut adalah lima yang berbeda <div> elemen dengan lima nilai yang berbeda:
/* For Chrome, Safari and Opera */
#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;}
/* Standard
syntax */
#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;}
Cobalah sendiri " Contoh
Sama seperti contoh di atas, tapi kurva kecepatan didefinisikan dengan fungsi kubik-bezier:
/* For Chrome, Safari and Opera */
#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);}
/* Standard syntax */
#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);} Cobalah sendiri " Pages terkait
CSS3 tutorial: CSS3 Animasi
Referensi HTML DOM: animationTimingFunction property