Niveau Niveau expert

Transitions CSS3

Tutorielcss

Publié par le , mis à jour le (131843 lectures)

css css3 transitions transition-duration

La durée des transitions : transition-duration

La propriété transition-duration

Cette propriété permet de préciser la durée de la transition. Si plusieurs propriétés ont été précisées à l'aide de la propriété précédente, il est possible de préciser plusieurs valeurs pour cette propriété en les séparant également d'une virgule.

Les valeurs acceptées sont des valeurs de temps. Ces dernières sont précisées dans un autre module CSS 3 : Les unités et valeurs. Pour rappel, une valeur de temps est donnée par un nombre suivi d'une unité de temps. Les deux unités de temps définies en CSS sont :

  • s : la seconde
  • ms : la milliseconde

Pour préciser une durée de 5 secondes pour la transition, nous pouvons alors utiliser la déclaration suivante :

selecteur {
  transition-duration: 5s;
}