Propriété CSS animation-fill-mode

❮ Précédent Suivant ❯

La propriété animation-fill-mode définit un style pour l'élément, quand l'animation n'execute pas (avant le début, après la fin, ou les deux).

La propriété animation-fill-mode est la seule propriété qui affecte l'élément avant le premier @keyframe est joué ou après le dernier keyframe est jouée. Elle peut avoir les valeurs suivantes: "forwards" pour spécifier que l'élément doit garder les valeurs de style définies par le dernier keyframe (dépend 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 le premier keyframe (dépend de animation-direction) et les garder pendant le période de animation-delay; "both" pour spécifier que l'animation doit suivre les règle pour "forwards" et "backwards" les deux; et "none" (initiale) pour spécifier qu'aucune style sera appliqué à l'élément avant ou après l'execution de l'animation.

Valeur initiale	none
Appliquée à	Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::before et ::after
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.animationFillMode = "forwards";

Syntaxe

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

Exemple

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

Essayez-vous-même!

Voyons ce qui se passera avec la valeur "backwards".

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #1c87c9;
      position: relative;
      -webkit-animation: element 5s;  /* Safari 4.0 - 8.0 */
      -webkit-animation-fill-mode: backwords; /* Safari 4.0 - 8.0 */
      animation: element 5s;
      animation-fill-mode: backwords;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
      from {top: 0px;}
      to {top: 200px; background-color: blue;}
      }
      @keyframes element {
      from {top: 0px;}
      to {top: 200px; background-color: #8ebf42;}
      }
    </style>
  </head>
  <body>
    <h2>Exemple de animation-fill-mode</h2>
    <div></div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
none	Valeur par défaut; indique, que les styles ne seront pas appliqués à l’élément avant et après de l’animation.
forwards	Indique, que l'élément doit conserver les valeurs de style définies par la dernière image clé (en fonction des propriétés des propriétés animation-iteration-count et animation-direction).
backwords	Indique que les valeurs des éléments spécifiés par la première image clé (en fonction de la direction de l'animation) sont stockées pendant le délai d'animation.
both	Indique que l'animation doit suivre les règles pour les deux valeurs: forwards et backwards.
initial	Cela définit la valeur initiale.
inherit	Cela hérite la propriété de l'élément parent.