Propriété CSS animation-delay
La propriété CSS animation-delay spécifie quand une animation va commencer. L'animation peut démarrer plus tard, immédiatement, ou avancer directement à un point précis de la chronologie (en utilisant un délai négatif).
La propriété animation-delay fait partie des propriétés CSS3.
La valeur par défaut est 0. Les valeurs négatives sont autorisées. Lorsque des valeurs négatives sont utilisées, l'animation démarrera comme si elle avait déjà été jouée pendant N secondes/millisecondes.
Lorsque plusieurs valeurs séparées par des virgules sont spécifiées pour une propriété d'animation, elles s'enchaînent pour correspondre au nombre d'animations définies dans animation-name.
Si les keyframes d'une animation omettent la valeur de départ, le navigateur utilise les styles calculés de l'élément au moment où l'animation commence.
| Propriété | Valeur |
|---|---|
| Valeur initiale | 0s |
| S'applique à | Tous les éléments, les pseudo-éléments ::before et ::after. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.animationDelay = "1s"; |
Syntaxe
Syntaxe de la propriété CSS animation-delay
animation-delay: time | initial | inherit;Exemple de la propriété animation-delay :
Exemple de la propriété CSS animation-delay
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #1c87c9;
position: relative;
animation: delay 5s infinite;
animation-delay: 3s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Exemple d'animation-delay</h2>
<p>Ici, l'animation commence après 3 secondes.</p>
<div></div>
</body>
</html>Exemple de la propriété animation-delay avec une valeur négative :
Exemple de la propriété CSS animation-delay avec une valeur négative
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: delay 5s infinite;
animation-delay: -2s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Exemple d'animation-delay avec une valeur négative.</h2>
<p>Ici, l'animation démarrera comme si elle avait déjà été jouée pendant 2 secondes.</p>
<div></div>
</body>
</html>Exemple de la propriété animation-delay spécifiée en millisecondes :
Exemple de la propriété CSS animation-delay avec des millisecondes
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #8ebf42;
position: relative;
animation: delay 5s infinite;
animation-delay: 200ms;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Exemple d'animation-delay en millisecondes.</h2>
<p>Ici, l'animation démarrera après 200ms.</p>
<div></div>
</body>
</html>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| time | Définit le nombre de secondes (s) ou de millisecondes (ms) à attendre avant le démarrage de l'animation. Optionnel. | Tester » |
| initial | Définit la propriété à sa valeur par défaut. | |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelle est la bonne définition de la propriété CSS animation-delay ?