Contoh
Mengubah properti animationFillMode dari <div> elemen:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Cobalah sendiri " Definisi dan Penggunaan
Properti animationFillMode menentukan apa gaya akan berlaku untuk elemen ketika animasi tidak bermain (when it is finished, or when it has a "delay") .
Secara default, animasi CSS tidak akan mempengaruhi elemen Anda menghidupkan sampai keyframe pertama "played" , dan kemudian berhenti mempengaruhi sekali keyframe terakhir telah selesai. Properti animationFillMode bisa mengubah perilaku ini.
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 | |||||
|---|---|---|---|---|---|
| animationFillMode | 43.0 | Tidak didukung | 16.0 5.0 Moz | Tidak didukung | 30.0 |
Sintaksis
Kembali properti animationFillMode:
object .style.animationFillMode Mengatur properti animationFillMode:
object .style.animationFillMode="none|forwards|backwards|both|initial|inherit"
Nilai properti
| Nilai | Deskripsi |
|---|---|
| none | nilai default. animasi tidak akan menerapkan gaya apapun untuk target sebelum atau setelah mengeksekusi |
| forwards | Setelah ujung animasi (determined by animation-iteration-count) , animasi akan menerapkan nilai properti untuk waktu animasi berakhir |
| backwards | animasi akan menerapkan nilai properti didefinisikan dalam keyframe yang akan mulai iterasi pertama dari animasi, selama periode didefinisikan oleh animasi-delay. Ini adalah baik nilai-nilai dari keyframe (when animation-direction is "normal" or "alternate") atau orang-orang dari ke keyframe (when animationDirection is "reverse" or "alternate-reverse") |
| both | animasi akan mengikuti aturan untuk kedua maju dan mundur. Artinya, itu akan memperpanjang sifat animasi di kedua arah |
| initial | Set properti ini ke nilai default. Baca tentang awal |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Rincian teknis
| Nilai default: | tak satupun |
|---|---|
| Kembali Nilai: | Sebuah String, yang mewakili properti animasi-fill-mode dari suatu unsur |
| CSS Versi | CSS3 |
Pages terkait
Referensi CSS: animation-fill-mode property
<Style Object