Exemple
Modification de la propriété animationFillMode d'un <div> élément:
document.getElementById("myDIV").style.animationFillMode = "forwards";
Essayez vous - même » Définition et utilisation
La propriété animationFillMode précise ce que les styles seront appliqués pour 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 n'affectera pas l'élément que vous animez jusqu'à ce que la première image - clé est "played" , puis cesse de l' affecter une fois la dernière image clé est terminée. La propriété animationFillMode peut remplacer ce comportement.
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Les chiffres suivis par Moz précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| animationFillMode | 43,0 | Non supporté | 16,0 5,0 Moz | Non supporté | 30,0 |
Syntaxe
Retour la propriété animationFillMode:
object .style.animationFillMode Définissez la propriété animationFillMode:
object .style.animationFillMode="none|forwards|backwards|both|initial|inherit"
Valeurs de propriété
| Valeur | La description |
|---|---|
| none | Valeur par défaut. L'animation ne s'appliquera tous les styles à la cible avant ou après son exécution |
| forwards | Après la fin de l' animation (determined by animation-iteration-count) , l'animation appliquera les valeurs de propriété pour le temps de l'animation a pris fin |
| 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 retard. Ce sont soit des valeurs de l'image - clé à partir de (when animation-direction is "normal" or "alternate") la (when animationDirection is "reverse" or "alternate-reverse") (when animation-direction is "normal" or "alternate") ou ceux de la keyframe (when animationDirection is "reverse" or "alternate-reverse") |
| both | L'animation suivra les règles pour les deux avant et en arrière. Autrement dit, il prolongera les propriétés d'animation dans les deux sens |
| 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. En savoir plus sur hériteront |
Détails techniques
| Valeur par défaut: | aucun |
|---|---|
| Valeur de retour: | Une chaîne, ce qui représente la propriété animation-fill-mode d'un élément |
| version CSS | CSS3 |
Pages associées
Référence CSS: la animation-fill-mode property
<Style objet