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
0sou0msindique 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.
Syntaxe
/* Valeurs temporelles */
/* Type <time> */
transition-delay: 3s;
transition-delay: 2s, 4ms;
/* Valeurs globales */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;
Valeurs
<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é.
Syntaxe formelle
Exemples
transition-delay: 0.5s
transition-delay: 1s
transition-delay: 2s
transition-delay: 4s
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Transitions La définition de 'transition-delay' dans cette spécification. |
Version de travail | Définition initiale. |
| Valeur initiale | 0s |
|---|---|
| Applicabilité | tous les éléments, ainsi que les pseudo-elements ::before et ::after |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser