CSS3 animation-fill-mode Propriété
Exemple
Déplacez un objet d'un endroit à un autre avec une animation, et laissez-le là :
Essayez-le vous-même »
Prise en charge des navigateurs
Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge la propriété.
Le nombre qui précède immédiatement -webkit-, -ms- ou -moz- est la première version du navigateur qui prend en charge la propriété préfixée.
| Propriété | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- |
4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o- |
Définition et utilisation
La propriété animation-fill-mode spécifie le style à appliquer à un élément lorsque l'animation n'est pas en cours de lecture (lorsqu'elle est terminée, ou lorsqu'elle a un délai et n'a pas encore commencé à être lue).
Par défaut, une animation CSS n'affecte pas un élément avant la lecture de la première image clé, et cesse d'affecter l'élément après l'achèvement de la dernière image clé. La propriété animation-fill-mode peut modifier ce comportement.
| Valeur par défaut : | none |
|---|---|
| Héritée : | non |
| Animable : | Non. VoirAnimable (animable)。 |
| version : | CSS3 |
| Syntaxe JavaScript : | object.style.animationFillMode="forwards" Essayez-le vous-même |
Syntaxe CSS
Valeur de la propriété
| Valeur | Description |
|---|---|
| none | Valeur par défaut. L'animation n'appliquera aucun style à l'élément cible avant ou après l'exécution de l'animation. |
| forwards | Après la fin de l'animation (telle que déterminée par animation-iteration-count), l'animation appliquera les valeurs des propriétés. |
| backwards | L'animation appliquera les valeurs des propriétés définies dans les images clés qui démarrent la première itération de l'animation pendant la période définie par animation-delay. Il s'agit des valeurs de l'image clé `from` (lorsque `animation-direction` est "normal" ou "alternate") ou des valeurs de l'image clé `to` (lorsque `animation-direction` est "reverse" ou "alternate-reverse"). |
| both | L'animation suit les règles à la fois pour forwards et backwards. C'est-à-dire que l'animation étendra les propriétés d'animation dans les deux directions. |
| initial | Définit cette propriété à sa valeur par défaut. Voir.initial。 |
| inherit | Hérite de cette propriété depuis l'élément parent. Voirinherit。 |
Articles connexes
Tutoriel CSS3 :Animations CSS3
autres extensions