La propriété transition-delay
La transition commence, par défaut, dès que la propriété est changée suite à l'événement. La propriété transition-delay permet d'adapter ce comportement en retardant ou en avançant le début de la transition.
Lorsqu'une valeur positive est donnée, le démarrage de la transition est retardé. Par exemple :
selecteur {
transition-delay: 1s;
}
Cette définition fait en sorte que la transition démarre une seconde après le changement de la valeur.
Dans le cas d'une valeur négative, la transition ne peut naturellement pas démarrer avant le changement de valeur car cela voudrait dire que le navigateur peut anticiper les changements. Au contraire, l'animation sera lancée lors du changement de valeur mais donnera l'impression que cette dernière a commencé plus tôt.
selecteur {
transition-delay: -1s;
}
La page d'exemple suivante illustre cette propriété.