Propriété CSS animation-fill-mode

La propriété animation-fill-mode définit comment une animation CSS applique des styles à sa cible en dehors de la période où elle s'exécute réellement — c'est-à-dire avant qu'elle démarre et après qu'elle se termine.

Par défaut, une animation @keyframes ne stylise un élément que pendant sa lecture. Dès que l'animation se termine, l'élément revient brusquement à ce que ses règles CSS normales indiquent. Si un animation-delay est défini, l'élément affiche également ses styles normaux pendant cette période d'attente. animation-fill-mode vous permet de modifier ce comportement afin que l'élément puisse conserver la dernière image après la fin, ou adopter la première image avant le début. C'est l'une des propriétés CSS3.

Pourquoi animation-fill-mode est importante

Un problème courant : vous animez un bloc de invisible à visible, mais dès que l'animation se termine il disparaît à nouveau — parce que la règle sous-jacente indique toujours opacity: 0. Définir animation-fill-mode: forwards maintient l'élément sur sa dernière image-clé afin qu'il reste visible. C'est la raison la plus courante pour laquelle on utilise cette propriété.

Les quatre valeurs significatives correspondent clairement au moment où une image est maintenue :

none (par défaut) — l'élément utilise ses styles normaux avant et après l'animation. Les images-clés ne s'appliquent que pendant la lecture.
forwards — après la fin de l'animation, l'élément conserve les styles de la dernière image-clé atteinte (l'image to/100% pour une exécution normale). L'image choisie dépend de animation-iteration-count et animation-direction.
backwards — pendant la période animation-delay avant le démarrage de l'animation, l'élément affiche déjà les styles de la première image-clé (dépend de animation-direction).
both — applique les règles de forwards et de backwards : la première image est maintenue avant la fin du délai, et la dernière image est maintenue après la fin de l'animation.

Lorsque vous donnez à la propriété raccourcie animation plusieurs valeurs séparées par des virgules, chaque mode de remplissage s'applique à l'animation correspondante listée dans animation-name.

Valeur initiale	none
S'applique à	Tous les éléments. S'applique également aux pseudo-éléments ::before et ::after.
Héritée	Non.
Animatable	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 »

Avec forwards, le bloc se retrouve 200px plus bas et vert — et reste ainsi au lieu de revenir à sa position de départ et à sa couleur bleue.

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

backwards n'a d'effet visible que lorsqu'il existe un animation-delay : pendant le délai, l'élément affiche déjà la première image-clé. Ici, le bloc est déjà à sa position from et la page attend 2 secondes avant que le mouvement commence.

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

Essayez vous-même »

Pendant le délai de 2 secondes, le bloc se trouve à top: 0 et est bleu — la première image-clé — au lieu du style vert à 200px de l'élément par sa propre règle.

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

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

both combine les deux : la première image-clé est maintenue pendant le délai, puis l'animation s'exécute et la dernière image-clé est maintenue ensuite.

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

Valeurs

Valeur	Description
none	Valeur par défaut. L'animation n'applique aucun style à l'élément avant et après son exécution.
forwards	Spécifie que l'élément doit conserver les valeurs de style définies par la dernière image-clé.
backwards	Spécifie que l'élément doit obtenir les valeurs de style définies par la première image-clé et les conserver pendant la période animation-delay.
both	Spécifie que l'animation doit suivre les règles de forwards et de backwards.
initial	Fait en sorte que la propriété utilise sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

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

forwardsbackwardsalternate