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é.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.
<style>
#carre {
width: 200px;
height: 200px;
background-color: white;
border: 2px solid blue;
}
#carre:hover {
transition-delay: 2s;
border-color: red;
background-color: yellow;
}
</style>
</div> <div id="carre"></div>
Passez la souris sur le carré