transition-delay

La propriété transition-delay indique la durée à attendre avant de débuter la transition qui s'applique pour un changement de propriété.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Cette durée peut être nulle, positive ou négative :

• Une valeur de 0s ou 0ms indique que l'animation correspondante démarrera immédiatement lorsque la valeur sera modifiée.
• Une valeur positive permettra d'attendre avant de démarrer l'effet de transition.
• Une valeur négative lancera l'animation immédiatement mais à partir d'un état intermédiaire (comme si la  transition avait déjà commencé).

Il est possible d'indiquer plusieurs valeurs d'attente. Chaque valeur sera appliquée à la propriété correspondante donnée par la liste transition-property (qui agit comme un index des propriétés concernées par les transitions). S'il n'y a pas suffisamment de valeurs dans cette liste, les valeurs précédentes seront répétées jusqu'à ce qu'il y en ait suffisamment. S'il y a plus de valeurs d'attente que d'éléments dans transition-property, la liste est simplement tronquée. Dans les deux cas, la déclaration CSS est considérée comme valide.

/* Valeurs temporelles */
/* Type <time> */
transition-delay: 3s;
transition-delay: 2s, 4ms;

/* Valeurs globales */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;

<time>

Une valeur <time> qui indique la durée à attendre avant de démarrer l'effet de transition déclenché par le changement de valeur d'une propriété.

<time>#

• Utiliser les transitions CSS
• L'API TransitionEvent