Temporisation des animations et perception UX

1) Pourquoi le timing est critique

• sens de la réponse instantanée et confiance dans le système ;
• la clarté des causes-enquêtes (d'où/où l'élément a été déplacé) ;
• fatigue et confort dans les longues sessions ;
• précision des actions (surtout sur mobile et à des taux élevés).

Règle : Le timing sert de sens. Si l'animation n'aide pas à comprendre « ce qui s'est passé », elle interfère.

2) Psychophysique et seuils

• ≤ 50 ms - écho d'entrée (impression, effet de clic) ; il semble instantané.
• ≤ 100 ms est le premier fidback visuel par action (bouton « appuyé »).
• 120-180 ms - hover/focus, transition d'état « douce ».
• 180-280 ms - modeleurs/panneaux ; il est perçu comme une apparition « naturelle ».
• 300-500 ms - mouvement attentif (élément partagé), progrès « un pas en avant ».
💡 700 ms - risques de « lenteur » ; ne laissez que si cela a un sens (par exemple, confirmation de gain).
• ≈ 1200-1600 ms - cycle skeleton/shimmer ; plus longtemps - fatiguant.

3) Courbes d'accélération (easing) et « poids »

• Standard : 'cubic-bezier (0. 2, 0, 0. 2, 1) 'est une dynamique « matérielle » neutre.
• Accélération (pressed) : 'cubic-bezier (0. 4, 0, 1, 1) "- entrée rapide, clic court.
• Décélération (overlay out) : 'cubic-bezier (0, 0, 0. 2, 1) "est une sortie douce.
• Accent souligné (rarement) : 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2)` с overshoot ≤ 8 px.

Optique de poids : plus le composant (carte, drower) est grand, plus la durée est longue (+ 40-80 ms par base).

4) Phases et chorégraphie

1. Initiation (10-40 ms) : fade facile/échelle 0. 98→1 est le signal de départ.

2. Transport (phase principale) : mouvement/divulgation.

3. Sédiments (20-60 ms) : petit frein, stabilisation de l'ombre/anneau de mise au point.

• Listes : 20-40 ms/élément, maximum 6-8 éléments consécutifs.
• Formes : pas de cascade ; tout apparaît en même temps pour ne pas gêner l'entrée.

Réversibilité : « retour » miroir « avant » et plus rapide de 15 à 30 %.

5) Timings par types d'interactions

6) Perception du temps : Comment « accélérer » sans accélération réelle

Affordance instantanée : changement instantané de curseurs/style pressé ≤ 100 ms avant même le réseau.
Dissimulation de la difficulté : paralléliser les téléchargements ; traction en arrière-plan des données jusqu'à l'ouverture du panneau.
L'ancrage sémantique : L'élément partagé et la direction du mouvement réduisent le coût cognitif de l'attente.
Mises à jour optimistes : UI « prêt » immédiatement, le serveur confirme ou annule.

7) Fatigue et hygiène des animations

Évitez les pulsations infinies ; tout cycle doit être discontinu ou discontinu.
Les micro-effets sur les tableaux d'éléments (tableau, grid) ne sont pas blur/box-shadow sur chaque nœud.
Maintenez 'prefers-reduced-motion : reduce' : ne laissez que fade ≤ 100 ms ou commutateur d'état statique.

css
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration:.01ms! important; }
}

8) Jetons de temporisation (système de conception)

json
{
"motion": {
"duration": { "press": 90, "hover": 160, "focus": 160, "overlayIn": 240, "overlayOut": 180, "tab": 200, "shared": 280 },
"easing": {
"standard": "cubic-bezier(0. 2,0,0. 2,1)",
"accelerate": "cubic-bezier(0. 4,0,1,1)",
"decelerate": "cubic-bezier(0,0,0. 2,1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Nom : 'motion. duration.{role}` и `motion. easing. {role} 'est unique pour le moteur de composants et Figma.

9) Réalisation : CSS et Framer Motion

css
:root{
--dur-press:90ms; --dur-hover:160ms; --dur-overlay-in:240ms; --dur-overlay-out:180ms;
--ease-std:cubic-bezier(.2,0,.2,1);
--ease-acc:cubic-bezier(.4,0,1,1);
--ease-dec:cubic-bezier(0,0,.2,1);
}
.button{ transition: transform var(--dur-press) var(--ease-acc), box-shadow var(--dur-hover) var(--ease-std); }
.button:active{ transform: scale(.98); }
.modal-enter{ animation: modalIn var(--dur-overlay-in) var(--ease-std) both; }
.modal-exit { animation: modalOut var(--dur-overlay-out) var(--ease-dec) both; }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes modalOut{ from{opacity:1} to{opacity:0; transform:translateY(8px) scale(.99)} }

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{opacity:0}} animate={{opacity:1}} exit={{opacity:0}}
transition={{duration:.18, ease:[0. 2,0,0. 2,1]}} className="fixed inset-0 bg-black/50">
<motion. div initial={{y:16, scale:.98, opacity:0}}
animate={{y:0, scale:1, opacity:1, transition:{duration:.24, ease:[0. 2,0,0. 2,1]}}}
exit={{y:8, scale:.99, opacity:0, transition:{duration:.18, ease:[0,0,0. 2,1]}}}
className="m-auto max-w-lg rounded-2xl bg-white p-6">
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

10) Composition temporelle : Parallèle vs séquence

Parallèle (fade + translate en même temps) - plus rapide dans la sensation.
La séquence (d'abord le conteneur, puis le contenu) est plus claire que la structure, mais plus longue. Appliquez quand il est important de montrer la hiérarchie.
Évitez les « marches »> 60 ms entre les éléments étroitement liés dans le même bloc.

11) Timing et contenu

Texte : n'animez pas letter/word-by-word dans les produits ; c'est une technique de marketing.
Nombres/compteurs : pas 40-60ms par trampoline, sans trembler layout (tabular-nums).
Graphiques : divulgation de la série 180-240 ms, hover-highlight ≤ 120 ms.

12) Disponibilité et erreur de perception

Les styles de focus doivent apparaître sans retard.
Avertissements/erreurs - animation minimale (≤ 120 ms), sans secouer si l'utilisateur avec AT (assistive tech).
Évitez les flashs> 3/s et les grands clignotants contrastés.

13) Spécificité iGaming

• Presse ≤ 100 ms ; le statut de « busy » immédiatement ; le toast/indicateur final est sans retard.
• Le temps de réponse UI est plus important que l'animation de confirmation : confirmation courte 120-160 ms.

• Départ ≤ 200 ms, cycle uniforme, freinage 300-500 ms ; pas de scintillement sans fin.
• Win-sursaut ≤ 500 ms, sans stroboscope ; le texte de la somme est AAA.

• Mises à jour par batterie (250-1000 ms) ; diff visuel ≤ 160 ms ; pas de sauts de mise en page.
• Sur hover/focus - un débris d'éclairage de 80 à 120 ms pour ne pas « migrer ».

14) Anti-modèles

Courbes linéaires pour les mouvements (sensation de « mécanique »).
Durées> 400 ms pour les états simples du bouton.
Cascade 100 + ms sur une liste de dizaines d'éléments (gravomotine).
Ombres/blur sur des centaines d'éléments dans l'animation.
Incohérence : les mêmes actions avec différentes temporisations dans le même produit.
Focus retardé ou délai d'activation sur le clavier.

15) QA-checklist timing

Consistance

• Les temporisations et les courbes sont tirées des tokens, les mêmes pour les mêmes actions.

Réponse

• Press/hover/focus sont empilés dans une échelle de 80-180 ms.
• Première réponse visuelle ≤ 100 ms.

Chorégraphie

• L'entrée et la sortie sont symétriques ; la sortie est 15 à 30 % plus rapide que l'entrée.
• La cascade ne dépasse pas 8 éléments et 40 ms pas.

A11y

• 'prefers-reduced-motion' soutenu ; Focus sans retard.
• Pas de clignotements> 3/s.

Performance

• Seules les formes/opacités sont animées ; pas de blur/ombres massives.

16) Documentation dans le système de conception

« Motion Tokens » : durée/easing/stagger + carte des applications (button, overlay, tabulation, list).
« Rhythm & Phasing » : schémas de cascade et de réversibilité.
« Reduce Motion » : règles de dégradation et exemples.
« Do/Don't » : courts clips avec timcodes et métriques cibles (INP/First Feedback).

Résumé succinct

Le bon timing est une réponse instantanée, une chorégraphie compréhensible et des courbes économiques. Gardez des durées courtes pour les micro-états, étirez seulement là où cela ajoute du sens, maintenez le reduce-motion et n'animez pas les propriétés « chères ». L'interface est alors ressentie vivante et fiable - en particulier dans les scénarios en temps réel et les taux élevés.