CSS animation-fill-mode Property

La propriété animation-fill-mode définit un style pour l'élément lorsque l'animation n'est pas en cours d'exécution (avant son démarrage, après sa fin, ou les deux).

La propriété animation-fill-mode fait partie des propriétés CSS3.

La propriété animation-fill-mode est la seule à affecter l'élément avant la lecture de la première @keyframe ou après la lecture de la dernière keyframe. Elle peut prendre les valeurs suivantes : "forwards" pour spécifier que l'élément doit conserver les valeurs de style définies par la dernière keyframe (en fonction des propriétés animation-iteration-count et animation-direction) ; "backwards" pour spécifier que l'élément doit obtenir les valeurs de style définies par la première keyframe (dépend de animation-direction) et les conserver pendant la période animation-delay ; "both" pour spécifier que l'animation doit suivre les règles de "forwards" et "backwards", et "none" (par défaut) pour spécifier qu'aucun style ne sera appliqué à l'élément avant ou après l'exécution de l'animation.

Lorsque plusieurs valeurs séparées par des virgules sont spécifiées pour les propriétés abrégées d'animation, elles sont appliquées aux animations correspondantes définies dans animation-name.

Valeur initiale	none
S'applique à	Tous les éléments, ainsi qu'aux pseudo-éléments ::before et ::after.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.animationFillMode = "forwards";

Syntaxe

Syntaxe de la propriété CSS animation-fill-mode

animation-fill-mode: none | forwards | backwards | both | initial | inherit;

Exemple de la propriété animation-fill-mode avec la valeur "forwards" :

Exemple de la propriété CSS animation-fill-mode avec la valeur forwards

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        animation: element 5s;
        animation-fill-mode: forwards;
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété animation-fill-mode avec la valeur "backwards" :

Exemple de la propriété CSS animation-fill-mode avec la valeur backwards

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        animation: element 5s;
        animation-fill-mode: backwards;
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description
none	Il s'agit de la valeur par défaut. L'animation n'appliquera aucun style à l'élément avant et après son démarrage.
forwards	Spécifie que l'élément doit conserver les valeurs de style définies par la dernière keyframe.
backwards	Spécifie que l'élément doit obtenir les valeurs de style définies par la première keyframe et les conserver pendant la période animation-delay.
both	Spécifie que l'animation doit suivre les règles de forwards et backwards.
initial	Définit la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.

Pratique

La propriété animation-fill-mode possède les valeurs suivantes, sauf :

forwards
backwards
alternate