Propriété CSS animation-fill-mode
Exemple
Laissez l'élément <div> conserver les valeurs de style de la dernière image clé lorsque l'animation se termine :
div {
animation-fill-mode: forwards;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La animation-fill-mode
propriété spécifie un style pour l'élément lorsque l'animation n'est pas en cours de lecture (avant qu'elle ne démarre, après qu'elle se termine, ou les deux).
Les animations CSS n'affectent pas l'élément avant la lecture de la première image clé ou après la lecture de la dernière image clé. La animation-fill-mode
propriété peut remplacer ce comportement.
Valeur par défaut: | rien |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.animationFillMode="avant" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit-, -moz- ou -o- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
animation-fill-mode | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.1 12.0 -o- |
Syntaxe CSS
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Valeurs de propriété
Value | Description |
---|---|
none | Default value. Animation will not apply any styles to the element before or after it is executing |
forwards | The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) |
backwards | The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period |
both | The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Laissez l'élément <div> obtenir les valeurs de style définies par la première image clé avant le début de l'animation (pendant la période de délai d'animation) :
div {
animation-fill-mode: backwards;
}
Exemple
Laissez l'élément <div> obtenir les valeurs de style définies par la première image clé avant le début de l'animation, et conservez les valeurs de style de la dernière image clé lorsque l'animation se termine :
div {
animation-fill-mode: both;
}
Pages connexes
Tutoriel CSS : Animations CSS
Référence HTML DOM : propriété animationFillMode