Exemple
Animer quelque chose se déplaçant d'un endroit à l'autre et le faire rester là:
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
} Essayez - le vous - même » Définition et utilisation
La propriété animation-fill-mode spécifie un style de l'élément lorsque l'animation ne joue pas (when it is finished, or when it has a delay) .
Par défaut, les animations CSS ne touchent pas l'élément jusqu'à ce que la première image - clé est "played" , puis arrête une fois que la dernière image est terminée. La propriété animation-fill-mode peut remplacer ce comportement.
| Valeur par défaut: | none |
|---|---|
| Hérité: | no |
| Animable: | no. Read about animatable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object .style.animationFillMode="forwards" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit-, -moz-, ou -O- précisent la première version qui a travaillé avec un préfixe.
| 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- |
Syntaxe CSS
animation-fill-mode: none|forwards|backwards|both|initial|inherit;propriété valeurs
| Valeur | La description |
|---|---|
| none | Valeur par défaut. L'animation ne sera pas appliquer les styles à l'élément cible avant ou après son exécution |
| forwards | Après la fin de l' animation (determined by animation-iteration-count) l' (determined by animation-iteration-count) , l'animation appliquera les valeurs de propriété pour le temps de l'animation terminée |
| backwards | L'animation appliquera les valeurs des propriétés définies dans l'image-clé qui va commencer la première itération de l'animation, au cours de la période définie par l'animation-delay. Ce sont soit les valeurs de la de keyframe (when animation-direction is "normal" or "alternate") l' (when animation-direction is "reverse" or "alternate-reverse") (when animation-direction is "normal" or "alternate") ou celles du keyframe (when animation-direction is "reverse" or "alternate-reverse") l' (when animation-direction is "reverse" or "alternate-reverse") |
| both | L'animation suivra les règles pour les deux avant et en arrière. Autrement dit, il va étendre les propriétés de l'animation dans les deux directions |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial |
| inherit | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Pages associées
CSS3 tutoriel: CSS3 Animations
Référence HTML DOM: animationFillMode property