Cluster C4 : CSS et design
Guide complet des animations et transitions CSS
Le mouvement doit clarifier l'état de l'interface, pas détourner l'attention du contenu. Structurer transitions, keyframes et easing rend l'expérience plus cohérente.
Choisir entre transition et keyframes
Les transitions conviennent aux changements d'état simples comme hover, focus ou ouverture de panneau, car elles restent prévisibles et faciles à réutiliser.
Les keyframes sont plus adaptées aux loaders et aux mouvements narratifs, mais doivent rester discrètes et respecter reduced-motion.
Règles à standardiser dans l'équipe
- Animer d'abord `transform` et `opacity`.
- Limiter les courbes à quelques tokens d'easing bien nommés.
- Gérer durées et easing dans le design system pour éviter les valeurs ad hoc.
Exemple pratique entrée/sortie
Entrée
Composant : interrupteur Besoin : retour d'état rapide et clair
Sortie
transform 180ms cubic-bezier(.2,.8,.2,1) color 140ms ease-out