CSS -animasie-vul-modus Eiendom
Voorbeeld
Laat die <div>-element die stylwaardes van die laaste sleutelraam behou wanneer die animasie eindig:
div {
animation-fill-mode: forwards;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die animation-fill-mode
eienskap spesifiseer 'n styl vir die element wanneer die animasie nie speel nie (voordat dit begin, nadat dit eindig, of albei).
CSS-animasies beïnvloed nie die element voordat die eerste sleutelraam gespeel is of nadat die laaste sleutelraam gespeel is nie. Die animation-fill-mode
eiendom kan hierdie gedrag ignoreer.
Standaard waarde: | geen |
---|---|
Geërf: | geen |
Animateerbaar: | geen. Lees oor animeerbaar |
Weergawe: | CSS3 |
JavaScript-sintaksis: | voorwerp .style.animationFillMode="vorentoe" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Nommers gevolg deur -webkit-, -moz-, of -o- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
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- |
CSS-sintaksis
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Eiendomswaardes
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 |
Meer voorbeelde
Voorbeeld
Laat die <div>-element die stylwaardes kry wat deur die eerste sleutelraam gestel is voordat die animasie begin (gedurende die animasievertragingsperiode):
div {
animation-fill-mode: backwards;
}
Voorbeeld
Laat die <div>-element die stylwaardes kry wat deur die eerste sleutelraam gestel is voordat die animasie begin, en behou die stylwaardes van die laaste sleutelraam wanneer die animasie eindig:
div {
animation-fill-mode: both;
}
Verwante bladsye
CSS-tutoriaal: CSS-animasies
HTML DOM verwysing: animationFillMode eiendom