Animation de style Propriété
Exemple
Modification de l'animation d'un élément <div>, à l'aide de la propriété abrégée :
document.getElementById("myDIV").style.animation = "mynewmove 4s 2";
Définition et utilisation
La propriété animation est une propriété abrégée pour six des propriétés d'animation :
animationName
animationDuration
animationTimingFunction
animationDelay
animationIterationCount
animationDirection
Remarque : spécifiez toujours la propriété animationDuration, sinon la durée est de 0 et ne sera jamais lue.
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 | 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
Renvoyez la propriété d'animation :
object.style.animation
Définissez la propriété d'animation :
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
Valeurs de propriété
Value | Description |
---|---|
animationName | Specifies the name of the keyframe you want to bind to the selector |
animationDuration | Specifies how many seconds or milliseconds an animation takes to complete |
animationTimingFunction | Specifies the speed curve of the animation |
animationDelay | Specifies a delay before the animation will start |
animationIterationCount | Specifies how many times an animation should be played |
animationDirection | Specifies whether or not the animation should play in reverse on alternate cycles |
animationFillMode | Specifies what values are applied by the animation outside the time it is executing |
animationPlayState | Specifies whether the animation is running or paused |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Détails techniques
Valeur par défaut: | aucun 0 facile 0 1 normal aucun en cours d'exécution |
---|---|
Valeur de retour : | Une chaîne, représentant la propriété d'animation d'un élément |
Version CSS | CSS3 |
Pages connexes
Référence CSS : propriété d'animation