Propriété animationFillMode de Style

Définition et utilisation

animationFillMode La propriété spécifie les styles appliqués à l'élément lorsque l'animation ne joue pas (à la fin de l'animation, ou avec un "décalage").

Par défaut, les animations CSS n'affectent pas l'élément en cours d'animation avant de jouer le premier keyframe, puis arrêtent d'affecter l'élément après que le dernier keyframe est terminé.animationFillMode La propriété peut contourner ce comportement.

Exemple

Modifier la propriété animationFillMode de l'élément <div> :

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

Essayez-le vous-même

Syntaxe

Retourner la propriété animationFillMode :

object.style.animationFillMode

Définir la propriété animationFillMode :

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

Valeur de propriété

Valeur Description
none Valeur par défaut. L'animation n'appliquera pas de style sur l'élément cible avant ou après son exécution.
forwards Après la fin de l'animation (décidée par animation-iteration-count), l'animation appliquera cette valeur de propriété à la fin de l'animation.
backwards

Dans la période définie par animation-delay, l'animation appliquera les valeurs des propriétés définies dans le keyframe, qui démarre la première itération de l'animation.

Ce sont les valeurs des keyframes (lorsque l'orientation de l'animation est "normal" ou "alternate") ou les valeurs vers les keyframes (lorsque l'orientation de l'animation est "reverse" ou "alternate-reverse").
both L'animation suivra les règles vers l'avant et vers l'arrière. Autrement dit, elle étendra les propriétés d'animation dans les deux directions.
initial Définissez cette propriété sur sa valeur par défaut. Voir initial.
inherit Inhérite cette propriété de son élément parent. Voir inherit.

Détails techniques

Valeur par défaut : none
Valeur de retour : Une chaîne de caractères, représentant l'élément Attribut animation-fill-mode.
Version de CSS : CSS3

Support du navigateur

animationFillMode C'est une fonctionnalité CSS3 (1999).

Tous les navigateurs le supportent complètement :

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Support Support Support Support Support 11

Pages associées

Référence du manuel CSS :Attribut animation-fill-mode