tutorial pengembangan web terbaru
 

Style animationTimingFunction Property

<Style Object

Contoh

Mengubah properti animationTimingFunction dari <div> elemen:

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

Definisi dan Penggunaan

animationTimingFunction 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.


Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Nomor diikuti oleh Moz menentukan versi pertama yang bekerja dengan awalan.

Milik
animationTimingFunction 43.0 Tidak didukung 16.0
5.0 Moz
Tidak didukung 30.0

Sintaksis

Kembali properti animationTimingFunction:

object .style.animationTimingFunction

Mengatur properti animationTimingFunction:

object .style.animationTimingFunction="linear|ease|ease-in|ease-out|cubic-bezier( Nilai properti
Nilai Deskripsi
linear animasi memiliki kecepatan yang sama dari awal sampai akhir
ease nilai default. animasi memiliki awal yang lambat, kemudian cepat, sebelum berakhir perlahan
ease-in animasi memiliki awal yang lambat
ease-out animasi memiliki ujung yang lambat
ease-in-out animasi memiliki kedua awal yang lambat dan ujung yang lambat
cubic- bezier( n , n , n , n ) Tentukan 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

Rincian teknis

Nilai default: meredakan
Kembali Nilai: Sebuah String, yang mewakili properti animasi-waktu-fungsi elemen
CSS Versi CSS3

Pages terkait

Referensi CSS: animation-timing-function property


<Style Object