Stijl animationFillMode-eigenschap

Definitie en gebruik

animationFillMode De eigenschap bepaalt de stijl die wordt toegepast op het element wanneer de animatie niet wordt afgespeeld (bij het einde van de animatie, of bij "vertraging").

Standaard wordt een CSS-animatie niet toegepast op het element dat in animatie is voordat de eerste keyframe wordt afgespeeld, en stopt het effect na het afspelen van de laatste keyframe.animationFillMode De eigenschap kan dit gedrag overschrijven.

Voorbeeld

Wijzig de animationFillMode-eigenschap van het <div>-element:

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

Probeer het zelf

Syntaxis

Terugkeerwaarde van de animationFillMode-eigenschap:

object.style.animationFillMode

Instellen van de animationFillMode-eigenschap:

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

Eigenschapswaarde

Waarde Beschrijving
none Standaardwaarde. De animatie toepast geen stijl voordat of na het uitvoeren.
forwards Na het einde van de animatie (gebaseerd op animation-iteration-count), wordt deze eigenschap toegepast op de waarde van het einde van de animatie.
backwards

Tijdens de periode die is gedefinieerd door animation-delay, wordt de animatie de eigenschappen toegepast zoals gedefinieerd in de keyframes, die de eerste iteratie van de animatie starten.

Deze zijn de waarden van de keyframes (wanneer de animatierichting "normal" of "alternate" is) of de waarden naar de keyframes (wanneer de animatierichting "reverse" of "alternate-reverse" is).
both De animatie volgt de regels voor voorwaarts en achterwaarts. Dit betekent dat het de animatie-eigenschappen in beide richtingen zal uitbreiden.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap wordt van de ouderlijke elementen geërfd. Raadpleeg inherit.

Technische details

Standaardwaarde: none
terugkeerwaarde: een tekenreeks die de animation-fill-mode Property.
CSS versie: CSS3

browserondersteuning

animationFillMode is een CSS3 (1999) kenmerk.

Ondersteuning door alle browsers volledig:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
ondersteunt ondersteunt ondersteunt ondersteunt ondersteunt 11

gerelateerde pagina's

CSS Referentiehandleiding:animation-fill-mode Property