Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

animation-fill-mode

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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.

Valeur initialenone
Applicabilitétous les éléments, ainsi que les pseudo-elements ::before et ::after
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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>#


<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

Spécification État Commentaires
CSS Animations
La définition de 'animation-fill-mode' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple (Oui)-webkit
43.0
5.0 (5.0)-moz
16.0 (16.0)[1]
10 12-o
12.10
4.0-webkit
Fonctionnalité Android Chrome Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome pour Android
Support simple ? ? ? ? ? ? ?

[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

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, teoli, Sebastianz, FredB, tregagnon
 Dernière mise à jour par : SphinxKnight,