motion

Que fait motion ?

Motion explique le changement et confirme l'entrée. Si elle ne fait ni l'un ni l'autre, c'est de la décoration et elle a besoin d'une raison.

1. Faut-il l'animer ?

À quelle fréquence l'utilisateur la voit	Décision
100+ fois par jour (raccourcis, bascule de palette, frappe)	Ne jamais animer
Des dizaines de fois (survol, navigation dans une liste, onglets)	Minuscule ou rien (couleur/opacité en moins de 150 ms)
Occasionnellement (modale, tiroir, toast, menu déroulant)	Transition standard
Rarement (intégration, succès, héros première visite)	Place au plaisir

Ne jamais animer les actions déclenchées par le clavier.

2. Courbes d'accélération

• Entrée ou sortie : cubic-bezier(.23, 1, .32, 1) fort ease-out.
• Déplacement à l'écran : cubic-bezier(.77, 0, .175, 1) ease-in-out.
• Tiroirs/panneaux : cubic-bezier(.32, .72, 0, 1).
• Couleur/survol : ease. Mouvement constant (marquee, progression) : linear.
• Jamais ease-in pour l'UI ; il donne une sensation de lenteur au moment où l'utilisateur regarde.

3. Durée

Appui 100-160 ms · infobulle 125-200 ms · menu déroulant 150-250 ms · modale/tiroir 200-400 ms · héros marketing jusqu'à 800 ms. Les sorties sont ~20 % plus rapides que les entrées. Les mouvements UI restent sous 300 ms.

4. Règles de conception

• Animer uniquement transform et opacity. Jamais width, height, top, left ou transition: all.
• Rien n'apparaît à partir de scale(0) ; commencer à scale(.95) + opacity: 0.
• Popovers et menus se déploient depuis leur déclencheur (transform-origin au niveau du déclencheur). Les modales restent centrées.
• Boutons : :active { transform: scale(.97) } avec une transition de 120 ms.
• Infobulles : différer la première (~400 ms) ; les adjacentes s'ouvrent instantanément.
• Échelonner les listes de 30 à 50 ms par élément, plafonner le total à 400 ms.
• Révélations au défilement : une par page au maximum, petite distance (8-16 px), exécutée une fois. Pas sur chaque section.
• Ressorts (Motion/Framer, React Spring) pour le glissement, les gestes et les mouvements interrompables : { type: "spring", duration: .4, bounce: .15 }. Garder le rebond entre 0,1 et 0,3, et uniquement sur les surfaces ludiques.
• Privilégier les transitions CSS et @starting-style pour les entrées/sorties simples ; l'API View Transitions pour les morphing de page/état ; une bibliothèque JS uniquement lorsque des gestes ou des séquences le nécessitent.

5. Mouvement réduit (obligatoire)

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

Conserver les changements d'opacité et la couleur d'état ; supprimer le mouvement, le parallaxe et les secousses.

Format de revue

Lors de la revue du code d'animation, répondre avec un tableau : | Avant | Après | Raison |, une ligne par problème.