Atribut animationTimingFunction Style

definisi dan penggunaan

animationTimingFunction atur garis kecepatan animasi.

garis kecepatan mendefiniskan waktu yang dibutuhkan animasi untuk berubah dari satu gaya CSS ke yang lain.

garis kecepatan digunakan untuk perubahan yang lancar.

contoh

ubah atribut animationTimingFunction elemen <div> ini:

document.getElementById("myDIV").style.animationTimingFunction = "linear";

cobalah sendiri

syntaks

kembalikan atribut animationTimingFunction:

object.style.animationTimingFunction

atur atribut animationTimingFunction:

object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"

nilai atribut

nilai deskripsi
linear kecepatan animasi tetap sama dari awal hingga akhir.
ease nilai standar. Animasi mulai lambat, kemudian mempercepat, dan akhirnya berakhir lambat.
ease-in animasi mulai lambat.
ease-out animasi berakhir lambat.
ease-in-out animasi memiliki awal dan akhir yang lambat.
cubic-bezier(n, n, n, n)

definiskan nilai Anda sendiri dalam fungsi kubik Bezier.

nilai yang mungkin adalah angka bilangan dari 0 hingga 1.
initial atur atribut ini ke nilai standarnya. Lihat initial.
inherit mengambil atribut ini dari elemen induknya. Lihat inherit.

detil teknis

nilai standar: ease
nilai kembalian: string, menunjukkan elemen Properti animation-timing-function.
versi CSS: CSS3

dukungan peramban

animationTimingFunction adalah fitur CSS3 (1999).

semua peramban mendukungnya penuhnya:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
dukungan dukungan dukungan dukungan dukungan 11

halaman relevan

Panduan Referensi CSS:Properti animation-timing-function