Propriété d'animation CSS
Exemple
Lier une animation à un élément <div>, en utilisant la propriété abrégée :
div
{
animation: mymove 5s infinite;
}
Définition et utilisation
La animation
propriété est une propriété abrégée pour :
- nom_animation
- animation-durée
- fonction de synchronisation d'animation
- délai d'animation
- nombre d'itérations d'animation
- animation-direction
- mode de remplissage d'animation
- animation-play-state
Remarque : spécifiez toujours la propriété animation-duration , sinon la durée est de 0 et ne sera jamais lue.
Valeur par défaut: | aucun 0 facile 0 1 normal aucun en cours d'exécution |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.animation="mon mouvement 5s infini" |
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.0 -o- |
Syntaxe CSS
animation: name duration timing-function delay iteration-count
direction fill-mode play-state;
Valeurs de propriété
Value | Description |
---|---|
animation-name | Specifies the name of the keyframe you want to bind to the selector |
animation-duration | Specifies how many seconds or milliseconds an animation takes to complete |
animation-timing-function | Specifies the speed curve of the animation |
animation-delay | Specifies a delay before the animation will start |
animation-iteration-count | Specifies how many times an animation should be played |
animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles |
animation-fill-mode | Specifies what values are applied by the animation outside the time it is executing |
animation-play-state | 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 |
Pages connexes
Tutoriel CSS : Animations CSS
Référence HTML DOM : propriété d'animation