Attribut ANIMATION-DELAY
Rôle
L’attribut animation-delay permet de spécifier le délai à attendre avant le début de l’animation.
Version : CSS3
Héritage (inherit) : non
Propriété Javascript : element.style.animationDelay
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
body{
padding: 10px;
background-color: rgb(230,230,230);
}
img{
border-radius: 50%;
width: 100px;
position: relative;
display: block;
margin: 0 auto;
border: thin solid orange;
animation-name: cos;
animation-duration: 1s;
animation-delay: 3s;
animation-timing-function:ease-in ;
animation-direction: alternate ;
animation-iteration-count: infinite;
}
@keyframes cos {
0% {top: 0px}
100% {top: 150px}
}
– Le code HTML
<img src="lorempixel.com/output/animals-q-c-100-100-10.jpg" alt="">
Résultat
Dans cet exemple, l’animation commencera au bout de 3 secondes. Appuyez sur la touche RERUN(survolez la démonstration, en bas à droite) pour recommencer
Compatibilité
L’attribut animation-delay est pris en charge par tous les principaux navigateurs.
A partir d’Internet Explorer 10
Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -webkit-(Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opéra)
Valeurs
Les différentes valeurs de l’attribut animation-delay sont:
- délai
- Le délai exprimée en seconde (ex: 5s) ou en milliseconde (ex: 5000ms)
Syntaxe :
animation-delay : 5s - initial
- Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
animation-delay : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
animation-delay : inherit
A voir aussi
animation– animation-delay– animation-duration– animation-timing-function
