Properti fungsi-waktu animasi CSS
Contoh
Mainkan animasi dengan kecepatan yang sama dari awal hingga akhir:
div {
animation-timing-function: linear;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
animation-timing-function
Menentukan kurva kecepatan animasi .
Kurva kecepatan menentukan WAKTU yang digunakan animasi untuk mengubah dari satu set gaya CSS ke yang lain.
Kurva kecepatan digunakan untuk membuat perubahan lancar.
Nilai bawaan: | reda |
---|---|
Diwarisi: | tidak |
Animasi: | tidak. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.animationTimingFunction="linear" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Angka yang diikuti oleh -webkit-, -moz-, atau -o- menentukan versi pertama yang berfungsi dengan awalan.
Property | |||||
---|---|---|---|---|---|
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- |
Sintaks CSS
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;
Fungsi pengaturan waktu animasi menggunakan fungsi matematika, yang disebut kurva Cubic Bezier, untuk membuat kurva kecepatan. Anda dapat menggunakan nilai Anda sendiri dalam fungsi ini, atau menggunakan salah satu nilai yang telah ditentukan sebelumnya:
Nilai properti
Value | Description | Play it |
---|---|---|
linear | The animation has the same speed from start to end | |
ease | Default value. The animation has a slow start, then fast, before it ends slowly | |
ease-in | The animation has a slow start | |
ease-out | The animation has a slow end | |
ease-in-out | The animation has both a slow start and a slow end | |
step-start | Equivalent to steps(1, start) | |
step-end | Equivalent to steps(1, end) | |
steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end" | |
cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
|
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Kiat: Coba nilai yang berbeda di bagian "Contoh Lainnya" di bawah.
Lebih Banyak Contoh
Contoh
Untuk lebih memahami nilai fungsi waktu yang berbeda;
Berikut adalah lima elemen <div> berbeda dengan lima nilai 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;}
Contoh
Sama seperti contoh di atas, tetapi kurva kecepatan didefinisikan dengan 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);}
Halaman Terkait
Tutorial CSS: Animasi CSS
Referensi DOM HTML: properti animationTimingFunction