Niveau Niveau expert

Transitions CSS3

Tutorielcss

Publié par le , mis à jour le (81260 lectures)
css css3 transitions animations transform transition-delay

Sommaire


Délai de déclenchement : transition-delay

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é.

Quiz

Testez vos connaissances avec un Quiz CSS