Exemple
Modification de l'animation d'un <div> élément, en utilisant la propriété raccourcie:
// Code for Chrome, Safari and Opera
document.getElementById("myDIV").style.WebkitAnimation = "mynewmove 4s 2";
// Standard syntax
document.getElementById("myDIV").style.animation =
"mynewmove 4s 2";
Essayez vous - même » Définition et utilisation
La propriété d'animation est un raccourci pour six des propriétés d'animation:
animationName
animationDuration
animationTimingFunction
animationDelay
animationIterationCount
animationDirection
Note: Indiquez toujours la propriété animationDuration, sinon la durée est 0, et ne sera jamais joué.
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 de Webkit, Moz, ou O préciser la première version qui a travaillé avec un préfixe.
Propriété | |||||
---|---|---|---|---|---|
animation | 43,0 4.0 Webkit | 10.0 | 16,0 5,0 Moz | 4.0 Webkit | 30,0 15,0 Webkit 12.1 12,0 -o- |
Remarque: Chrome, Safari et Opera soutiennent une alternative, la propriété WebkitAnimation.
Syntaxe
Retourne la propriété d'animation:
object .style.animation
Définissez la propriété d'animation:
object .style.animation=" Valeurs de propriété Valeur La description animationName Indique le nom de l'image clé que vous souhaitez lier au sélecteur animationDuration Indique le nombre de secondes ou millisecondes une animation nécessaire pour terminer
animationTimingFunction Spécifie la courbe de vitesse de l'animation animationDelay Indique un délai avant que l'animation démarre
animationIterationCount Indique le nombre de fois une animation devrait être joué animationDirection Indique si l'animation ou non devrait jouer dans le sens inverse des cycles alternatifs animationFillMode Indique quelles valeurs sont appliquées par l'animation en dehors du temps, il est en cours d'exécution animationPlayState Indique si l'animation est en cours d'exécution ou en pause 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: aucune 0 0 1 facilité aucune marche normale Valeur de retour: Une chaîne représentant la propriété d'animation d'un élément version CSS CSS3
Pages associées
Référence CSS: animation property
<Style objet