animation-delay

Syntaxe

Paramètres

Description

Cette propriété permet d'indiquer le délai avant le démarrage de l'animation.

Remarques

• Définition et utilité : La propriété animation-delay permet de spécifier un délai avant que l'animation définie ne commence. Cela est particulièrement utile pour synchroniser plusieurs animations sur une page ou pour créer un effet de "staging" où les animations démarrent à des moments différents.
• Unités de temps acceptées : La valeur de animation-delay peut être exprimée en secondes (s) ou en millisecondes (ms). Par exemple, une valeur de 2s correspond à un délai de 2 secondes avant le démarrage de l'animation, tandis que 500ms indique un délai de 500 millisecondes.
• Valeurs négatives : Une particularité intéressante de animation-delay est qu'elle peut accepter des valeurs négatives. Dans ce cas, l'animation démarre immédiatement, mais comme si elle avait déjà progressé de la durée indiquée en négatif. Par exemple, avec -2s, l'animation commence comme si elle avait déjà tourné pendant 2 secondes.
• Valeur par défaut : La valeur par défaut de animation-delay est 0s, ce qui signifie qu'il n'y a aucun délai, et l'animation commence immédiatement après le rendu de la page. Si aucun délai n'est spécifié, l'animation est exécutée dès qu'elle est appliquée.
• Effets combinés avec animation-duration : Lorsque animation-delay est utilisé conjointement avec animation-duration, il est possible de créer des animations complexes démarrant à des moments précis et se déroulent sur des durées différentes. Cela est idéal pour orchestrer des animations multiples sur une interface.
• Impact sur les performances : Bien que animation-delay permette d'ajouter des délais, son utilisation excessive, notamment avec des valeurs élevées, peut entraîner des retards dans la perception de l'interactivité d'une page. Cela peut être ressenti comme un "lag" par l'utilisateur si l'animation est essentielle à l'expérience.
• Animation inactive pendant le délai : Pendant le délai spécifié par animation-delay, l'élément conserve son apparence initiale et reste inactif. Si une propriété comme animation-fill-mode n'est pas définie, l'élément reprendra son style d'origine après l'animation.
• Applications pratiques : animation-delay est souvent utilisé dans des scénarios comme des animations en cascade, des effets de chargement ou des transitions séquentielles sur des éléments multiples (par exemple, des lettres dans un texte ou des images dans une galerie). Cela permet de donner un rythme ou un dynamisme visuel à la page.