Atribut Style animationFillMode

Definisi dan penggunaan

animationFillMode Atribut menentukan gaya yang akan diterapkan ke elemen saat animasi tidak dimainkan (pada akhir animasi, atau saat ada "jeda").

Secara standar, animasi CSS tidak mempengaruhi elemen yang sedang di-animas sebelum dimainkan pertama frame penting, dan berhenti mempengaruhi setelah frame penting terakhir selesai.animationFillMode Atribut dapat menekan perilaku ini.

Contoh

Ubah atribut animationFillMode elemen <div>:

document.getElementById("myDIV").style.animationFillMode = "forwards";

Coba sendiri

Syarat

Kembalikan atribut animationFillMode:

object.style.animationFillMode

Atur atribut animationFillMode:

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

Nilai atribut

Nilai Deskripsi
none Nilai standar. Animasi tidak akan menambahkan gaya apapun ke target sebelum atau setelah eksekusi.
forwards Setelah animasi selesai (determinasi oleh animation-iteration-count), animasi akan menerapkan nilai atribut ini pada akhir animasi.
backwards

Dalam periode waktu yang ditentukan oleh animation-delay, animasi akan menerapkan nilai atribut yang didefiniskan dalam frame penting, yang akan memulai iterasi pertama animasi.

Ini adalah nilai dari frame penting (ketika arah animasi adalah "normal" atau "alternate") atau ke frame penting (ketika arah animasi adalah "reverse" atau "alternate-reverse").
both Animasi akan mengikuti aturan ke depan dan ke belakang. Artinya, ia akan memperluas atribut animasi di kedua arah.
initial Atur atribut ini ke nilai standarnya. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai standar: none
Nilai kembalian: String, yang menyatakan elemen Properti animation-fill-mode.
Versi CSS: CSS3

Dukungan peramban

animationFillMode Adalah fitur CSS3 (1999).

Semua peramban mendukung penuhnya:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Dukung Dukung Dukung Dukung Dukung 11

Halaman yang berhubungan

Panduan Referensi CSS:Properti animation-fill-mode