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. Le style utilisé sera celui défini par les autres règles CSS.
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.

Note : Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété animation-*, selon leur quantité, elles seront différemment affectées aux animations définies par animation-name. Pour plus d'informations, voir : paramétrer les valeurs des propriétés pour plusieurs animations.

Syntaxe formelle

<single-animation-fill-mode>#


<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="growsandstays">La boîte grandit et s'arrête</div>
  <div class="grows">La boîte grandit</div>
</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Animations
La définition de 'animation-fill-mode' dans cette spécification.
Version de travail Définition initiale.
Valeur initialenone
Applicabilitétous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi