animation-fill-mode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
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.
Exemple interactif
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 deanimation-iteration-count
:animation-direction
animation-iteration-count
dernière keyframe normal
pair ou impair 100%
outo
reverse
pair ou impair 0%
oufrom
alternate
pair 0%
oufrom
alternate
impair 100%
outo
alternate-reverse
pair 100%
outo
alternate-reverse
impair 0%
oufrom
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 deanimation-direction
:animation-direction
première keyframe normal
oualternate
0%
oufrom
reverse
oualternate-reverse
100%
outo
both
-
L'animation respectera les règles qui s'appliquent à
forwards
etbackwards
, 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.
Définition formelle
Valeur initiale | none |
---|---|
Applicabilité | tous les éléments, ainsi que les pseudo-elements ::before et ::after |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | Not animatable |
Syntaxe formelle
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
Specification |
---|
CSS Animations Level 1 # animation-fill-mode |
Compatibilité des navigateurs
BCD tables only load in the browser