Propriété transition-duration

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

Syntaxe

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

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

#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