Niveau : Expert

Transitions CSS3

Tutoriel par (Software engineer and UX Designer, Louvain-la-Neuve)
Créé le , mis à jour le (117390 lectures)
Tags : css, css3, transitions, transition-duration

Sommaire


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;
}