Mouvement

Jetons de duree et d'acceleration, modeles de mouvement WCAG 2.3.3.

Chaque transition dans ePassLive a un sens. Un fondu rapide signale un changement d'état ; un glissement lent signale un changement de contexte. Les jetons de mouvement associent durée et easing en recettes nommées pour que les transitions soient cohérentes.

Un fondu rapide signale un changement d'état ; un glissement lent signale un changement de contexte. Les jetons de mouvement associent durée et easing en recettes nommées pour que les transitions soient cohérentes.

Échelle de durées

Trois durées couvrent toutes les transitions. Si un mouvement nécessite un quatrième pas, le design surcomplique l'interaction.

--ep-duration-fast150msMicro-interactions : états hover, anneaux de focus, bascules, rotations d'icônes.

--ep-duration-normal200msTransitions standards : ouverture/fermeture de dropdown, changement d'onglet, expansion de carte.

--ep-duration-slow300msTransitions majeures : ouverture/fermeture de modale, glissement de tiroir, révélations au niveau page.

Courbes d'easing

L'easing contrôle comment une transition accélère et ralentit. Les trois courbes nommées correspondent à la physique naturelle : les objets ralentissent à l'arrivée, accélèrent au départ.

--ep-ease-outcubic-bezier(0, 0, 0.2, 1)Éléments entrant dans la vue. Décélère jusqu'au repos.

--ep-ease-incubic-bezier(0.4, 0, 1, 1)Éléments quittant la vue. Accélère au départ.

--ep-ease-in-outcubic-bezier(0.4, 0, 0.2, 1)Éléments se déplaçant entre positions. Accélération/décélération symétrique.

Démonstrations d'animation

Les points ci-dessous animent en continu avec chaque combinaison jeton easing + durée pour les comparer d'un coup d'œil. L'animation tourne à la même cadence pour que les courbes racontent une histoire visuelle : ease-out se stabilise vite, ease-in s'élance, ease-in-out fait un arc fluide.

--ep-duration-fast + ease-out

--ep-duration-normal + ease-out

--ep-duration-slow + ease-out

--ep-duration-fast + ease-in

--ep-duration-normal + ease-in

--ep-duration-slow + ease-in

--ep-duration-fast + ease-in-out

--ep-duration-normal + ease-in-out

--ep-duration-slow + ease-in-out

Ce qu'il faut éviter

Animer pour le plaisir d'animer.
Mélanger les durées sur la même interaction — ouvrir un dropdown en 150 ms et le fermer en 300 ms semble cassé.
Utiliser l'easing linear en dehors des transitions de couleur/opacité.
Oublier prefers-reduced-motion.