Propriété animation CSS

Définition et utilisation

animation L'attribut est une propriété abrégée utilisée pour définir six propriétés d'animation :

Remarque :Veuillez toujours stipuler animation-duration Sinon, la durée est de 0 et l'animation ne sera pas jouée.

Veuillez également consulter :

Tutoriel CSS3 :Animation CSS

Manuel de référence HTML DOM :animation

Exemple

Utilisez les propriétés raccourcies pour lier l'animation à l'élément div :

div
{
animation:mymove 5s infinite;
}

Essayez-le vous-même

Syntaxe CSS

animation: name duration timing-function delay iteration-count direction;
Valeur Description
animation-name Définit le nom du keyframe à lier au sélecteur.
animation-duration Définit le temps que l'animation prend pour se terminer, en secondes ou en millisecondes.
animation-timing-function Définit la courbe de vitesse de l'animation.
animation-delay Définit le délai avant le début de l'animation.
animation-iteration-count Définit le nombre de fois que l'animation doit être jouée.
animation-direction Définit si l'animation doit être jouée en sens inverse en alternance.
animation-fill-mode Définit la valeur appliquée en dehors du temps d'exécution de l'animation.
animation-play-state Définit si l'animation est en cours d'exécution ou en pause.

Détails techniques

Valeur par défaut : none 0 ease 0 1 normal
Héritabilité : non
Version : CSS3
Syntaxe JavaScript : object.style.animation="mymove 5s infinite"

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété.

Les nombres avec -webkit-、-moz- ou -o- indiquent la première version utilisant les préfixes.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
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-