animation-fill-mode

La propriété animation-fill-mode indique la façon dont une animation CSS doit appliquer les styles à sa cible avant et après son exécution.

Syntaxe

/* Valeurs avec un mot-clé */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Gestion de plusieurs animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

Valeurs

none

L'animation n'appliquera aucun style à la cible, avant et après l'exécution.

forwards

La cible retiendra les valeurs calculées définies lors de la dernière étape (keyframe). La dernière étape considérée dépend de la valeur de animation-direction et de animation-iteration-count :

animation-direction	animation-iteration-count	dernière keyframe
normal	pair ou impair	100% ou to
reverse	pair ou impair	0% ou from
alternate	pair	0% ou from
alternate	impair	100% ou to
alternate-reverse	pair	100% ou to
alternate-reverse	impair	0% ou from

backwards

L'animation appliquera les valeur définies par la première keyframe pertinente et les retiendra pendant la durée indiquée par animation-delay. La première keyframe pertinente dépend de la valeur de animation-direction :

animation-direction	première keyframe
normal ou alternate	0% ou from
reverse ou alternate-reverse	100% ou to

both

L'animation respectera les règles qui s'appliquent à forwards et backwards, entraînant ainsi l'extension des propriétés de l'animation dans les deux directions.

Syntaxe formelle

<single-animation-fill-mode>#
où 
<single-animation-fill-mode> = none | forwards | backwards | both

Exemples

CSS

.demo {
  border-top: 100px solid #ccc;
  height: 300px;
  font-family: sans-serif;
}
@keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
@-webkit-keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
.demo:hover .grows {
    animation-name: grow;
    animation-duration: 3s;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
    animation-name: grow;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}

HTML

<p>Déplacez votre souris sur la boîte grise.</p>
<div class="demo">
  <div class="grows">La boîte grandit</div>
  <div class="growsandstays">La boîte grandit et s'arrête</div>
</div>

Résultat

Spécifications

Compatibilité des navigateurs

[1] En plus de la version préfixée par -moz, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

Voir aussi

• Manipuler les animations CSS
• AnimationEvent