Propriété CSS animation-delay
La propriété CSS animation-delay définit le délai avant le démarrage d'une animation. Voir des exemples et les tester vous-même.
La propriété CSS animation-delay indique combien de temps attendre avant que l'animation ne commence à jouer. L'animation peut démarrer plus tard (délai positif), immédiatement (0s, valeur par défaut), ou sauter à un point intermédiaire de la chronologie (en utilisant un délai négatif).
Cette page couvre la syntaxe, les délais positifs et négatifs, les millisecondes, le comportement des délais avec plusieurs animations, ainsi que les considérations d'accessibilité à prendre en compte. La propriété animation-delay est l'une des propriétés CSS3, et elle est généralement associée à animation-name et animation-duration.
Pourquoi utiliser animation-delay
Un délai est utile lorsqu'une animation ne doit pas démarrer dès le chargement de la page ou l'ajout de l'élément au DOM. Cas courants :
- Décalage — attribuer à une liste d'éléments des délais croissants (
0s,0.1s,0.2s, …) pour qu'ils s'animent l'un après l'autre plutôt que tous en même temps. - Séquençage — attendre que l'animation d'un élément se termine avant qu'une autre commence.
- Pré-démarrage — utiliser un délai négatif pour insérer un élément au milieu d'une animation en boucle, évitant ainsi l'impression qu'il « surgit » au début du mouvement.
Comment fonctionne la valeur
La valeur par défaut est 0s. La valeur peut être exprimée en secondes (s) ou en millisecondes (ms).
- Une valeur positive (
animation-delay: 2s) attend aussi longtemps, puis joue l'animation à partir de sa première image-clé. - Une valeur de
0sdémarre l'animation immédiatement. - Une valeur négative (
animation-delay: -2s) démarre l'animation immédiatement, mais elle est rendue comme si elle avait déjà été jouée pendant ce laps de temps. La première partie de l'animation est ignorée — elle n'est jamais affichée.
Lorsque plusieurs valeurs séparées par des virgules sont spécifiées, elles sont appliquées cycliquement pour correspondre au nombre d'animations listées dans animation-name. Par exemple, animation-delay: 0s, 1s applique 0s à la première animation et 1s à la seconde.
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.
Remarque :
animation-delayn'affecte que la première itération. Il n'ajoute pas de pause entre les itérations d'une animation répétée — pour cela, intégrez la pause dans les keyframes elles-mêmes.
| Propriété | Valeur |
|---|---|
| Valeur initiale | 0s |
| S'applique à | Tous les éléments, pseudo-éléments ::before et ::after. |
| Héritée | Non. |
| Animatable | 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>Animation-delay example</h2>
<p>Here the animation starts after 3 seconds.</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>Animation-delay example with negative value.</h2>
<p>Here, the animation will start as if it had already been playing for 2 seconds.</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>Animation-delay example in milliseconds.</h2>
<p>Here, the animation will start after 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 de la propriété de son élément parent. |
Accessibilité
Les animations avec délai et en boucle peuvent être distrayantes et provoquer un inconfort chez les utilisateurs souffrant de troubles vestibulaires. Respectez la préférence système de l'utilisateur avec la media query prefers-reduced-motion et désactivez (ou réduisez) le mouvement lorsqu'il est demandé :
@media (prefers-reduced-motion: reduce) {
div {
animation: none;
}
}Raccourci
Il est rare de définir animation-delay seul — c'est généralement la quatrième valeur dans le raccourci animation, qui combine toutes les sous-propriétés d'animation :
/* name | duration | timing-function | delay */
div {
animation: delay 5s ease 3s infinite;
}Propriétés associées
- animation-name — quelles
@keyframesjouer - animation-duration — durée d'un cycle
- animation-iteration-count — nombre de répétitions
- animation-timing-function — la courbe d'accélération
- animation-fill-mode — styles appliqués avant la fin du délai et après la fin de l'animation