Attribut animation-delay CSS

Définition et utilisation

animation-delay Cette propriété définit quand l'animation commence.

Les valeurs de animation-delay sont exprimées en secondes ou en millisecondes.

Astuce :Permet les valeurs négatives, -2s fait commencer l'animation immédiatement, mais saute 2 secondes pour entrer dans l'animation.

Voir également :

Tutoriel CSS3 :Animation CSS

Manuel de référence HTML DOM :Propriété animationDelay

Exemple

Exemple 1

Attendre 2 secondes avant de commencer l'animation :

div {
  animation-delay: 2s;
}

Essayez-le vous-même

Exemple 2

Les valeurs négatives, notez que l'animation saute 2 secondes pour entrer dans le cycle d'animation :

div {
  animation-delay: -2s;
}

Essayez-le vous-même

Syntaxe CSS

animation-delay: time;
Valeur Description Test
time Optionnel. Définit le temps d'attente avant le début de l'animation, en secondes ou en millisecondes. La valeur par défaut est 0. Test

Détails techniques

Valeur par défaut : 0
Héritabilité : non
Version : CSS3
Syntaxe JavaScript : object.style.animationDelay="2s"

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 le préfixe.

Chrome 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-