Attribut ANIMATION-FILL-MODE

Rôle

L’attribut animation-fill-mode permet de gérer le comportement d’un élément HTML avant le début de l’animation ou lorsque celle-ci se termine.

L’élément HTML peut être, avant l’animation, dans l’état initial definit par la commande @keyframes (0% ou from) et/ou conserver, à la fin de l’animation, son état final.

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.animationFillMode

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

body{
  padding: 10px;
  background-color: rgb(230,230,230);
}
img{
  border-radius: 50%;
  width: 200px;
  position: relative;
  display: block;
  margin: 0 auto;
  border: thin solid orange;
  transform:rotate(-50deg);
  animation-name: cos;
  animation-duration: 4s;
  animation-delay: 3s;
  animation-timing-function:linear ;
  animation-iteration-count: 2;
  animation-direction: reverse;
  animation-fill-mode: both;
}
@keyframes cos {
  0% {transform:rotate(0deg)}
  100% {transform:rotate(60deg)}
}

– Le code HTML

<img src="//lorempixel.com/output/animals-q-c-200-200-10.jpg" alt="">

Résultat

Dans cet exemple, pendant le délai d’attente, l’élément se trouve dans l’état initial de la commande @keyframes puis à la fin de l’animation, il conserve son état.

Compatibilité

L’attribut animation-fill-mode est pris en charge par tous les principaux navigateurs.
A partir d’Internet Explorer 10.
Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -webkit-(Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opéra).

Valeurs

Les différentes valeurs de l’attribut animation-fill-mode sont:

none

Aucun état défini par @keyframes ne s’applique à l’élément ni avant, ni à la fin de l’animation : valeur par défaut
Syntaxe :
animation-fill-mode : running

backwards

Etat au début de l’animation (0% ou from) pendant le délai d’attente (animation-delay) donc avant l’animation
Syntaxe :
animation-fill-mode : backwards

forwards

L’élément HTML reste dans le même état qu’à la fin de l’animation
Syntaxe :
animation-fill-mode : running

both

L’élément HTML reste dans le même état qu’à la fin de l’animation mais il est dans l’état du début de l’animation (0% ou from) pendant le délai d’attente
Syntaxe :
animation-fill-mode : running

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
animation-fill-mode : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
animation-fill-mode : inherit

A voir aussi

animation– animation-delay– animation-duration– animation-timing-function