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
sé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 :
<div id="elem"></div>
#elem {
border: 1px solid black;
transition: width 2s ease 3s;
width: 100px;
height: 50px;
}
#elem:hover {
width: 400px;
}
:
Voir aussi
-
la propriété
animation,
qui permet de créer une animation
