Fondations

Mouvement

Le mouvement explique un changement d’état ; il ne décore pas. Durées courtes (120 à 260 ms), une seule courbe, et respect systématique de la préférence « réduire les animations ».

Durées et courbe

Courbe unique : cubic-bezier(0.2, 0, 0, 1) (sortie rapide, arrivée douce).

--sy-motion-fast120 ms · Survol, changement de couleur
--sy-motion-base180 ms · Menus, infobulles, repli de sidebar
--sy-motion-slow260 ms · Tiroirs, modales

// Tailwind v4 : variables en arbitraire
<div className="transition-colors duration-(--sy-motion-fast)" />
<aside className="transition-[width] duration-(--sy-motion-base) ease-(--sy-motion-easing) motion-reduce:transition-none" />

Mouvement réduit

prefers-reduced-motion est respecté globalement

La feuille de base du design system ramène toutes les animations et transitions à 0,01 ms quand l’utilisateur a activé « Réduire les animations ». Ajoutez en plus motion-reduce:transition-none ou motion-reduce:animate-none sur les animations continues (spinners exceptés : ils signalent un chargement).

À faire
Fondu ou glissement court à l’ouverture d’un tiroir, d’un menu, d’un toast.
À faire
Transition de couleur au survol (fast).
À éviter
Animations en boucle, parallaxe, rebonds, délais qui ralentissent la saisie répétitive.