Propriété transition-duration

La propriété transition-duration définit la durée d'exécution d'une transition fluide transition.

Syntaxe

csssélecteur {
  transition-duration: temps en s ou ms;
}

Valeurs

Valeur	Description
`s`	Définit le temps en secondes (par exemple `3s`). Il est possible de définir des valeurs fractionnaires, par exemple, `0.5s` - une demi-seconde.
`ms`	Définit le temps en millisecondes (par exemple `3ms`). Une seconde équivaut à `1000` millisecondes.

Valeur par défaut : 0s.

Exemple

Passez la souris sur le bloc - il modifiera sa largeur de manière fluide en 2 secondes.

html<div id="elem"></div>

css#elem {
  transition-duration: 2s;
  transition-property: width;
  border: 1px solid black;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Voir aussi

la propriété transition-property,
qui définit le nom de la propriété pour une transition fluide
la propriété transition-delay,
qui définit le délai avant une transition fluide
la propriété transition-timing-function,
qui définit la fonction de temporisation pour une transition fluide
la propriété transition,
qui est un raccourci pour une transition fluide
la propriété animation,
qui permet de créer une animation