Gaya animasiTimingFunction Property
Contoh
Mengubah properti animationTimingFunction dari elemen <div>:
document.getElementById("myDIV").style.animationTimingFunction = "linear";
Definisi dan Penggunaan
AnimationTimingFunction 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.
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Angka yang diikuti oleh Moz menentukan versi pertama yang berfungsi dengan awalan.
Property | |||||
---|---|---|---|---|---|
animationTimingFunction | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
Sintaksis
Kembalikan properti animationTimingFunction:
object.style.animationTimingFunction
Setel properti animationTimingFunction:
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
Nilai properti
Value | Description |
---|---|
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 |
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 |
Detail Teknis
Nilai Bawaan: | reda |
---|---|
Nilai Kembali: | Sebuah String, mewakili properti fungsi waktu-animasi dari suatu elemen |
Versi CSS | CSS3 |
Halaman Terkait
Referensi CSS: properti fungsi pengaturan waktu animasi