1. Définir l'élément concerné et la durée de la transition
À savoir pour commencer que les transitions ne peuvent être appliquées que sur les propriétés qui peuvent être animées ; vous en trouverez la liste à la fin du document cité en référence [1].
Une transition se définit au minimum à l'aide de deux propriétés : transition-property et transition-duration. La première permet d'indiquer la ou les propriété(s) CSS concernée(s) par la transition, la seconde introduit la durée de la transition.
La transition de l'ancienne vers la nouvelle valeur a lieu lorsqu'un événement est déclenché, soit via une pseudo-classe (:hover, :focus, :active), soit via JavaScript (qui n'est donc plus indispensable).
Grâce aux transitions, il est ainsi possible de redimensionner des éléments, de déplacer un texte, de faire apparaître des infos-bulles, etc.
Les moteurs récents implémentent aujourd'hui la spécification CSS3 ; toutefois, pour certaines versions,...
- Accédez à tous les contenus de Connect en illimité
- Découvrez des listes de lecture et des contenus Premium
- Consultez les nouveaux articles en avant-première