Animation de stylePropriété FillMode
Exemple
Modification de la propriété animationFillMode d'un élément <div> :
document.getElementById("myDIV").style.animationFillMode = "forwards";
Définition et utilisation
La propriété animationFillMode spécifie les styles qui s'appliqueront à l'élément lorsque l'animation n'est pas en cours de lecture (lorsqu'elle est terminée ou lorsqu'elle a un "retard").
Par défaut, les animations CSS n'affecteront pas l'élément que vous animez jusqu'à ce que la première image clé soit "jouée", puis cesseront de l'affecter une fois la dernière image clé terminée. La propriété animationFillMode peut remplacer ce comportement.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de Moz spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
animationFillMode | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
Syntaxe
Renvoyez la propriété animationFillMode :
object.style.animationFillMode
Définissez la propriété animationFillMode :
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
Valeurs de propriété
Value | Description |
---|---|
none | Default value. The animation will not apply any styles to the target before or after it is executing |
forwards | After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended |
backwards | The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animationDirection is "reverse" or "alternate-reverse") |
both | The animation will follow the rules for both forwards and backwards. That is, it will extend 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 |
Détails techniques
Valeur par défaut: | rien |
---|---|
Valeur de retour : | Une chaîne, représentant la propriété animation-fill-mode d'un élément |
Version CSS | CSS3 |
Pages connexes
Référence CSS : propriété animation-fill-mode