Properti mode pengisian animasi CSS
Contoh
Biarkan elemen <div> mempertahankan nilai gaya dari bingkai utama terakhir saat animasi berakhir:
div {
animation-fill-mode: forwards;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti animation-fill-mode
menentukan gaya untuk elemen saat animasi tidak diputar (sebelum dimulai, setelah berakhir, atau keduanya).
Animasi CSS tidak mempengaruhi elemen sebelum keyframe pertama dimainkan atau setelah keyframe terakhir dimainkan. Properti animation-fill-mode
dapat menimpa perilaku ini.
Nilai bawaan: | tidak ada |
---|---|
Diwarisi: | tidak |
Animasi: | tidak. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.animationFillMode="maju" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Angka yang diikuti oleh -webkit-, -moz-, atau -o- menentukan versi pertama yang berfungsi dengan awalan.
Property | |||||
---|---|---|---|---|---|
animation-fill-mode | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.1 12.0 -o- |
Sintaks CSS
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Nilai properti
Value | Description |
---|---|
none | Default value. Animation will not apply any styles to the element before or after it is executing |
forwards | The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) |
backwards | The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period |
both | The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Biarkan elemen <div> mendapatkan nilai gaya yang ditetapkan oleh bingkai utama pertama sebelum animasi dimulai (selama periode penundaan animasi):
div {
animation-fill-mode: backwards;
}
Contoh
Biarkan elemen <div> mendapatkan nilai gaya yang ditetapkan oleh bingkai utama pertama sebelum animasi dimulai, dan pertahankan nilai gaya dari bingkai utama terakhir saat animasi berakhir:
div {
animation-fill-mode: both;
}
Halaman Terkait
Tutorial CSS: Animasi CSS
Referensi DOM HTML: properti animationFillMode