animation-fill-mode en CSS : garder le dernier cadre d'une animation au lieu d'y revenir

Une notification qui apparaît en glissant depuis le haut de l'écran, puis qui disparaît instantanément une fois l'animation terminée, en revenant brutalement à sa position de départ invisible : ce comportement surprenant, très courant chez les débutants, vient presque toujours d'un oubli de la propriété animation-fill-mode.

Par défaut, une Animation CSS n'a aucune mémoire de ce qui se passe avant son démarrage ni après sa fin : elle joue sa séquence, puis l'élément retrouve exactement l'apparence qu'il aurait eue sans elle. animation-fill-mode change ce comportement en prolongeant l'effet du premier ou du dernier cadre de l'animation au-delà de sa durée réelle.

Définition

animation-fill-mode détermine quelles valeurs CSS un élément conserve avant que l'animation ne démarre et après qu'elle se soit terminée. Elle accepte quatre valeurs principales : none, qui ne change rien (comportement par défaut), forwards, backwards et both, qui combine les deux.

forwards : garder le dernier état

forwards est la valeur la plus utilisée en pratique : elle fait en sorte que l'élément conserve les styles définis dans la dernière étape de la Animation CSS une fois celle-ci terminée, au lieu de revenir instantanément à son état d'avant l'animation.

@keyframes glisser-entrer {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.notification {
  animation: glisser-entrer 0.4s ease-out forwards;
}

backwards : appliquer le premier état avant le départ

backwards s'utilise surtout combinée à animation-delay : elle applique dès le chargement de la page les styles de la première étape de l'animation, avant même que le délai ne soit écoulé et que l'animation ne commence réellement. Sans elle, l'élément affiche brièvement son état final naturel avant de basculer soudainement vers l'état de départ de l'animation au moment où celle-ci démarre.

Le piège du saut au premier cadre

Le problème le plus fréquent touche justement les animations retardées avec un delay. Sans backwards, l'élément reste visible dans son état normal pendant tout le délai, puis saute brutalement à l'état de départ de l'animation pile au moment où elle démarre, un décalage visuel désagréable et parfaitement évitable.

Un raccourci pratique dans la propriété animation

animation-fill-mode s'écrit rarement seule : elle s'intègre le plus souvent directement dans le raccourci animation, après la durée, la Easing et timing-function et le délai éventuel, comme dans animation: glisser-entrer 0.4s ease-out 0.2s both.

Ce réglage est particulièrement utile pour un jeu de notifications qui s'enchaînent avec des délais différents, où chacune doit rester invisible avant son tour sans clignoter au chargement de la page.

Questions fréquentes

Le résultat visuel final est identique, mais forwards évite de dupliquer les valeurs dans deux endroits différents : sans elle, il faudrait répéter manuellement en dehors de @keyframes les styles du dernier cadre, avec le risque que les deux versions divergent lors d'une modification future.

Non, cette propriété n'existe que pour la famille animation et @keyframes. Une transition n'a pas ce problème de saut au premier cadre puisqu'elle part toujours de l'état CSS réellement appliqué à l'élément au moment du changement, sans jamais recréer d'état artificiel.

Dans la grande majorité des cas oui, sauf si l'on souhaite volontairement voir l'élément dans son état naturel pendant le délai avant l'animation, ce qui reste un choix de conception légitime mais plus rare que le besoin de masquer ce délai avec backwards.