Propriété transition-delay

La propriété transition-delay définit un délai avant le démarrage d'une transition fluide transition.

Syntaxe

sélecteur {
	transition-delay: 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 - pendant 3 secondes rien ne se passera (un délai de 3s est défini), puis il modifiera sa largeur de manière fluide en 2 secondes. Si vous retirez ensuite la souris - à nouveau pendant 3 secondes rien ne se passera, puis la largeur diminuera progressivement jusqu'à sa valeur initiale :

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

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

Exemple

Passez la souris sur le bloc - il modifiera d'abord sa largeur en 2 secondes, puis modifiera sa hauteur en 4 secondes. Les propriétés changeront séquentiellement, car un délai de 3 secondes est défini pour la hauteur (temps de modification de la largeur). Si vous retirez la souris - les changements se produiront dans l'ordre inverse : la largeur diminuera d'abord, puis la hauteur diminuera :

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

#elem {
	border: 1px solid black;
	transition-duration: 2s, 4s;
	transition-property: width, height;
	transition-delay: 0s, 3s;
	width: 100px;
	height: 25px;
}
#elem:hover {
	width: 400px;
	height: 50px;
}

Voir aussi

la propriété transition-property,
qui définit le nom de la propriété pour une transition fluide
la propriété transition-duration,
qui définit la durée d'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