CSS -animatie-vulmodus Eigenschap
Voorbeeld
Laat het <div>-element de stijlwaarden van het laatste keyframe behouden wanneer de animatie eindigt:
div {
animation-fill-mode: forwards;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De animation-fill-mode
eigenschap specificeert een stijl voor het element wanneer de animatie niet wordt afgespeeld (voordat deze begint, nadat deze is afgelopen of beide).
CSS-animaties hebben geen invloed op het element voordat het eerste keyframe wordt afgespeeld of nadat het laatste keyframe is afgespeeld. De animation-fill-mode
eigenschap kan dit gedrag overschrijven.
Standaardwaarde: | geen |
---|---|
geërfd: | Nee |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS3 |
JavaScript-syntaxis: | object .style.animationFillMode="forwards" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Getallen gevolgd door -webkit-, -moz- of -o- specificeren de eerste versie die met een prefix werkte.
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-syntaxis
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Eigendomswaarden
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 voorbeelden
Voorbeeld
Laat het <div>-element de stijlwaarden krijgen die zijn ingesteld door het eerste keyframe voordat de animatie begint (tijdens de animatievertragingsperiode):
div {
animation-fill-mode: backwards;
}
Voorbeeld
Laat het <div>-element de stijlwaarden krijgen die door het eerste keyframe zijn ingesteld voordat de animatie begint, en bewaar de stijlwaarden van het laatste keyframe wanneer de animatie eindigt:
div {
animation-fill-mode: both;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-animaties
HTML DOM-referentie: animatieFillMode-eigenschap