Sifat animationTimingFunction Style

Definisi dan penggunaan

animationTimingFunction Tentukan garis kecepatan animasi.

Garis kecepatan menentukan masa yang dibutuhkan untuk animasi untuk berubah dari gaya CSS satu ke yang lain.

Garis kecepatan digunakan untuk perubahan yang lancar.

Contoh

Ubah sifat animationTimingFunction elemen <div>:

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

Coba sendiri

Sintaks

Kembalikan sifat animationTimingFunction:

objek.style.animationTimingFunction

Tetapkan sifat animationTimingFunction:

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

Nilai sifat

Nilai Penerangan
linear Kecepatan animasi tetap sama dari permulaan hingga akhir.
ease Nilai lalai. Animasi dimulai dengan lambat, kemudian dipercepat, dan akhirnya diakhiri dengan lambat.
ease-in Animasi dimulai dengan lambat.
ease-out Animasi diakhiri dengan lambat.
ease-in-out Animasi mempunyai permulaan dan pengakhiran yang lambat.
cubic-bezier(n, n, n, n)

Tentukan nilai anda sendiri dalam fungsi kubik Bézier.

Nilai yang mungkin adalah angka bilangan antara 0 hingga 1.
initial Tetapkan sifat ini ke nilai lalainya. Lihat initial.
inherit Mewarisi sifat ini dari elemen induknya. Lihat inherit.

Detil teknikal

Nilai lalai: ease
Hasil kembalian: String, menunjukkan elemen Properti animation-timing-function.
Versi CSS: CSS3

Pematuhan pemeriksaan

animationTimingFunction Adalah ciri CSS3 (1999).

Semua pemeriksaan penggunaan sepenuhnya disokong:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Dapat disokong Dapat disokong Dapat disokong Dapat disokong Dapat disokong 11

页面相关

Panduan CSS:Properti animation-timing-function