Propriété CSS animation-fill-mode

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>

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>

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.

Support de Navigateurs

43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-


Trouvez-vous cela utile?

Articles Associées