Transitions CSS

La box-shadow vous a donné une profondeur calme. Les transitions donnent un changement calme dans le temps : un bouton adoucit son fond au survol, une carte se soulève un peu au focus, la couleur d’un lien glisse au lieu de claquer. Vous écrivez toujours deux états — le navigateur interpole entre eux pendant la durée que vous fixez.

Ce qu’est une transition

Une transition n’invente pas un nouveau look toute seule. Elle observe une propriété qui change déjà (souvent via :hover, :focus-visible ou une classe) et anime ce changement. Sans transition, le saut est instantané ; avec une, vous obtenez une glissade courte et lisible.

Les quatre longhands sont transition-property, transition-duration, transition-timing-function et transition-delay. Au quotidien, on utilise surtout le raccourci transition.

Propriété et durée

Nommez ce qui peut s’animer, et combien de temps le changement doit durer. Les durées sont des temps (0.2s, 200ms). Court et utile bat les attentes théâtrales — le retour UI vit souvent autour de 150ms–300ms.

Placez la transition sur la règle de base pour que l’entrée et la sortie du survol s’animent. Lister seulement les propriétés voulues évite qu’un saut de layout glisse pendant une demi-seconde.

Timing et délai

transition-timing-function façonne la courbe de vitesse : ease (ressenti par défaut), linear, ease-in, ease-out, ease-in-out, ou un cubic-bezier(...) personnalisé. transition-delay attend avant le début du changement — utile pour des menus en cascade, facile à abuser sur un seul bouton.

Ease-out paraît souvent naturel pour une UI qui apparaît. Linear convient à une progression qui doit se lire régulière. Réservez le délai aux séquences volontaires — pas pour rendre chaque clic tardif.

Raccourci et mouvement multi-propriétés

L’ordre typique du raccourci : propriété, durée, timing-function, délai. Vous pouvez lister plusieurs transitions séparées par des virgules. Préférez les propriétés amicales au paint — transform et opacity sont en général plus fluides que d’animer width, height, top ou margin.

Ici la profondeur de la leçon précédente rencontre le mouvement : l’ombre et le soulèvement partagent un même instant de survol. Gardez le déplacement petit pour que la page reste solide.

Reduced motion et quand préférer les animations

Certaines personnes préfèrent moins de mouvement. Respectez prefers-reduced-motion: reduce en raccourcissant ou en désactivant les transitions non essentielles. Les transitions brillent pour les changements d’état A → B. Les boucles ou récits en plusieurs étapes appartiennent aux animations CSS (@keyframes) plus loin dans ce module — après Transforms.

À vous de jouer

1. Ajoutez une transition de fond 0.2s à un bouton et survolez-le — puis déplacez transition de :hover vers la règle de base et comparez le comportement en quittant le survol.
2. Animez opacity avec ease-out au bascule d’une classe sur un panneau ; essayez linear et notez le ressenti.
3. Combinez transform: translateY(...) avec une box-shadow plus douce au survol d’une carte (deux propriétés, une liste de raccourci).
4. Dans DevTools, émulez prefers-reduced-motion: reduce et vérifiez que le mouvement non essentiel s’atténue.
5. Résistez à animer height pour un menu ouvert dans cet exercice — gardez cette expérience pour des motifs plus tard.

Erreurs fréquentes

• Écrire transition: all 1s pour que chaque propriété, layout compris, glisse pendant une seconde entière
• Des durées de plusieurs secondes qui rendent l’UI molle
• Animer width / top / margin quand transform ou opacity suffirait
• Ignorer prefers-reduced-motion
• Attendre qu’une transition boucle sans fin — c’est le terrain des animations

Résumé

• Les transitions adoucissent les changements de propriétés entre deux états sur une durée
• Contrôlez propriété, durée, timing-function et délai (ou le raccourci transition)
• Préférez un mouvement court sur des propriétés amicales au paint ; placez les transitions sur la règle de base
• Respectez les préférences reduced-motion ; utilisez les animations keyframes pour les boucles et séquences complexes
• Suite dans Effects & Motion : Transforms