Propriété transition-delay

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

Syntaxe

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

Valeurs

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 :

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

css#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 :

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

css#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