Propriété transition

La propriété transition est un raccourci pour les transitions fluides, elle permet de définir simultanément transition-duration, transition-property, transition-timing-function et transition-delay.

Syntaxe

csssélecteur {
  transition: valeur;
}

L'ordre des propriétés n'a pas d'importance, cependant la durée (transition-duration) doit être placée avant le délai (transition-delay).

Valeurs

Voir les propriétés correspondantes. Valeur par défaut : all 0s ease 0s.

La valeur none annule toutes les transitions (elles deviendront instantanées).

Exemple

Passez la souris sur le bloc - rien ne se passera pendant 3 secondes (il y a un délai de 3s), puis il modifiera sa largeur progressivement en 2 secondes. Si vous retirez ensuite la souris - à nouveau, rien ne se passera pendant 3 secondes, puis la largeur diminuera progressivement jusqu'à sa valeur d'origine :

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

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

Результат:

Voir aussi