Voici comment utiliser les transitions en CSS:
1. Sélectionnez l’élément auquel vous voulez appliquer la transition. Par exemple, si vous voulez que la couleur d’un lien change lentement lorsque vous passez dessus avec votre souris, sélectionnez cet élément avec le sélecteur approprié.
a { color: blue; }1. Définissez une propriété de transition sur cet élément. La propriété de transition est une propriété CSS qui permet de contrôler la vitesse à laquelle les changements de style sont effectués. Elle peut prendre plusieurs valeurs, notamment la propriété que vous voulez animer, la durée de l’animation, la façon dont l’animation se déroule et le temps de retard avant que l’animation ne commence.
a { color: blue; transition: color 0.5s ease-in-out 0s; }Dans cet exemple, la propriété `color` va changer sur une durée de `0.5s` (demi-seconde) avec un effet d’accélération et de décélération (`ease-in-out`) et sans délai (`0s`).
1. Ensuite, définissez le nouvel état de l’élément quand il est survolé.
a:hover { color: red; }Maintenant, lorsque vous survolez le lien, la couleur passera progressivement du bleu au rouge en une demi-seconde.
Notez que toutes les propriétés ne sont pas animables en CSS. Vous pouvez consulter une liste complète des propriétés animables sur le site Web de la MDN (Mozilla Developer Network).
