Magazine
Spécialité(s)
Résumé
La plupart du temps la modification de la valeur d'une propriété prend effet immédiatement. Aujourd'hui, le module Transitions de CSS3 ouvre de nouvelles portes : il permet en effet de modifier progressivement la valeur d'une propriété, sur une durée donnée. Ainsi, il devient possible de créer de véritables animations uniquement via la feuille de styles, sans la moindre ligne de JavaScript !
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
Cet article est réservé aux abonnés. Il vous reste 90% à découvrir.
S'abonner à Connect
- 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
Déjà abonné ? Connectez-vous