vexii1es/animation

Que fait animation ?

Le mouvement dans une interface explique ce qui s'est passé : d'où vient un élément, où il va, si une pression a été enregistrée. Tout ce qui ne fait pas cela est de la décoration, et la décoration a son propre petit budget. Cette compétence permet de dépenser ce budget avec précision : sans elle, le modèle anime tout avec le même fondu vers le haut.

La compétence est autonome. Si ui-ux (règles de style et d'interface) et front (code et pile technique) sont installés avec elle, ils la complètent.

Trois questions préalables

1. À quoi sert ce mouvement ? Retour d'action, lien entre états, attraction de l'attention sur une chose importante, caractère de la marque. S'il n'y a pas de réponse, n'animez pas.
2. À quelle fréquence la personne le verra-t-elle ? Le budget dépend de la réponse (section suivante).
3. Qu'existe-t-il déjà dans le projet ? Regardez les durées, les courbes et la bibliothèque d'animation utilisées et continuez dans le même esprit. Une nouvelle bibliothèque pour un seul effet est presque toujours une erreur.

Quelle quantité d'animation est appropriée

La règle principale : plus l'action est fréquente, moins il y a d'animation. Ce qui ravit lors de la première visualisation irrite à la centième.

À quelle fréquence l'utilisateur la voit	Que faire
Des centaines de fois par jour (raccourcis clavier, palette de commandes, changement d'onglets)	Pas d'animation
Des dizaines de fois par jour (menus, infobulles, survol)	Très rapide, jusqu'à 150 ms, ou pas d'animation
Occasionnellement (dialogue, panneau latéral, notification)	Une transition ordinaire de 200 à 300 ms
Rarement ou une fois (intégration, écran de succès, premier écran d'une page d'accueil)	Peut être expressif

Niveau par type de projet :

• Application (utilisée tous les jours) : sobre. États des contrôles, couches qui entrent et sortent, changements de mise en page fluides. Tout en dessous de 300 ms. Rien ne bouge sans une action de l'utilisateur.
• Vitrine (page d'accueil, site web, promotion) : perceptible. Un moment orchestré sur le premier écran, des blocs qui se révèlent au défilement, des détails vivants au survol. Le reste est calme.

Un moment expressif par écran, calme partout ailleurs. Animer tout à la fois est autant un signe de template que de ne pas avoir d'animation du tout.

N'animez pas : les actions déclenchées par le clavier, le changement de thème, les menus contextuels, tout ce que l'utilisateur fait plusieurs fois de suite.

Goût par défaut

Le propriétaire de la compétence peut modifier cette section pour correspondre à ses propres préférences. Les mots de l'utilisateur dans la demande actuelle prévalent.

Bienvenue sur les surfaces vitrines :

• Révélation au défilement — les sections et les gros objets apparaissent en douceur lorsqu'on les fait défiler. Une fois, sans répétitions.
• Scènes liées au défilement — une section épinglée où le défilement conduit l'animation et explique quelque chose sur le produit. Une ou deux par page ; le défilement lui-même reste ordinaire, sa vitesse et sa direction ne sont jamais détournées.

Ne pas utiliser sauf demande explicite :

• Lueur et bordures dégradées — contours scintillants, lueur néon, arrière-plans animés en dégradé. L'emphase vient du mouvement et de la typographie, pas de la lumière.

Bibliothèques : CSS en premier ; quand ce n'est pas suffisant dans React — Motion ; GSAP uniquement pour les scènes de défilement complexes. Les détails sont dans references/tools.md.

Le caractère du mouvement est « connecté et précis ».

• Flux à l'intérieur d'une application. Les écrans se fondent les uns dans les autres plutôt que d'être échangés : un objet « héros » traverse chaque étape, le texte se transforme en texte via un flou, seul ce qui a changé change, une nouvelle couche naît de sa source. Si la tâche comporte une séquence d'écrans ou d'états, lisez d'abord references/continuity.md et attribuez un héros.
• Pages d'accueil et sites web. Une courbe pour tout le site avec un démarrage net et une longue décélération douce, sans rebond ; le titre s'assemble mot par mot ; les grandes choses apparaissent hors d'un flou ; une scène de texte au défilement ; tout en CSS. Les recettes avec des valeurs exactes se trouvent dans references/showcase-recipes.md.

Ce qu'ils partagent : le flou avec l'opacité comme matériau de transition, l'entrée et la sortie qui se chevauchent au lieu d'une file d'attente, pas de rebond, et une courbe cohérente. Si le style du projet nécessite un caractère différent (terminal, rétro), consultez le tableau dans references/patterns.md.

Durées

Quoi	Durée
Réponse à une pression, un survol, la bascule elle-même	100–150 ms
Infobulle, menu déroulant, une petite entrée	150–200 ms
Dialogue, panneau, feuille	200–300 ms
Contenu changeant en réponse à une action (prix, compteur, graphique)	300–500 ms
Transition de page, un grand changement de mise en page	300–500 ms
Scènes décoratives sur les surfaces vitrines, sans implication de l'utilisateur	jusqu'à 800–1000 ms

• La sortie est plus courte que l'entrée d'environ un tiers : ce qui part n'est plus intéressant.
• Plus le trajet est long et plus la zone est grande, plus la durée est longue ; un petit élément à 400 ms paraît lent.
• Lorsque les règles se chevauchent, la plus courte l'emporte. Le contrôle lui-même répond toujours en 100–150 ms ; ce qu'il a modifié peut prendre plus de temps pour terminer, mais l'utilisateur ne doit pas avoir à attendre la fin de l'animation pour agir à nouveau.

Courbes et ressorts

• Entrée — ease-out : un démarrage rapide et un arrêt doux, ce qui semble réactif.
• Sortie — également ease-out, mais plus courte. Certains systèmes de design utilisent une courbe d'accélération pour les sorties, mais son démarrage lent ressemble à un délai, donc elle n'est pas utilisée ici ; le propriétaire de la compétence peut modifier cette règle.
• Déplacement à l'écran d'un point à un autre — ease-in-out.
• Linéaire — uniquement pour un mouvement continu : indicateur de rotation, marquee, progression.

Jetons par défaut :

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* courbe principale : démarrage net, longue décélération */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 160ms;    /* réponse : couleur, opacité */
  --duration-base: 300ms;    /* couches, arrière-plan et ombre des contrôles */
  --duration-slow: 450ms;    /* contenu qui se fond dans le contenu */
  --duration-reveal: 800ms;  /* blocs apparaissant sur les surfaces vitrines */
}

Une courbe pour tout le projet : lorsque chaque partie d'une transition l'utilise, elles se lisent comme un seul mouvement. Avec cette courbe, une réponse peut durer 200–450 ms et sembler instantanée, car la majeure partie du changement se produit dans les 100 premières ms.

Les ressorts battent les courbes lorsqu'un geste pilote le mouvement ou que l'animation peut être interrompue à mi-chemin (glisser, une feuille, un réordonnancement de liste) : ils préservent la vélocité et ne saccadent pas. Le rebond est uniquement pour le mouvement et l'échelle ; pour la couleur et l'opacité, il est toujours nul. Un rebond perceptible convient aux styles ludiques et irrite dans les outils de travail.

Règles d'exécution

• Animez transform et opacity. La largeur, la hauteur, les marges et la position déclenchent un recalcul de la mise en page et provoquent des saccades. Pour changer de taille, utilisez scale, la technique FLIP ou l'animation de mise en page d'une bibliothèque.
• Le flou est l'exception autorisée. filter: blur() jusqu'à 12 px avec l'opacité est le matériau signature d'une transition, mais cela coûte plus cher : appliquez-le à de petits blocs (un titre, une figure, une icône, une carte), jamais à un écran entier, et testez sur un téléphone.
• L'entrée et la sortie se chevauchent. Ce qui part et ce qui arrive coexistent pendant 30 à 50 % de la durée. Une file d'attente « d'abord ça disparaît, puis ça apparaît » brise la connexion et double le temps.
• Seule la différence bouge. Ce qui n'a pas changé (chiffres, mots, icônes) reste en place.
• Ne commencez jamais par scale(0). Rien dans la vie n'apparaît à partir d'un point : commencez à 0.9–0.96 avec l'opacité.
• transform-origin se trouve à la source. Un menu sort de son bouton, pas du centre.
• Pression : scale(0.97) sur :active donne la sensation d'un bouton physique.
• Interruptibilité. Construisez un mouvement interactif avec transition, pas avec @keyframes : une transition peut être inversée à mi-parcours, pas les keyframes.
• Rôles d'abord, timing ensuite. Lorsque plusieurs éléments bougent en réponse à un seul événement, attribuez un seul meneur ; les autres sont support, décoration ou statiques. Deux meneurs sont un problème de mise en page, pas d'animation.
• Une entrée par conteneur. Si le panneau a glissé, son contenu est déjà là : n'ajoutez pas un décalage des enfants par-dessus l'entrée du parent.
• Ce qui part libère immédiatement son espace, de sorte que les voisins se rapprochent pendant qu'il disparaît, pas après.
• La sortie reflète l'entrée et se produit en une seule fois. Ce qui est venu de la droite part à droite ; un groupe disparaît simultanément, sans décalage inversé.
• La direction suit le sens : « avant » entre par la droite, « retour » par la gauche.
• Décalage : un pas de 30 à 80 ms entre les éléments, la cascade entière ne dépasse pas 300–400 ms ; après le sixième ou septième élément, les autres apparaissent ensemble. Sur le premier écran d'une vitrine, le pas peut monter jusqu'à 100–150 ms.
• Les gestes utilisent des ressorts et ne bloquent jamais. L'élément suit le doigt un à un, peut être attrapé à mi-chemin et, après relâchement, reprend la vélocité du geste. Rebond uniquement après un lancer.
• Infobulles : un délai avant la première, les suivantes dans le même groupe apparaissent immédiatement et sans animation.
• La révélation au défilement se produit une fois. Un bloc qui se cache et réapparaît à chaque passage est fatiguant.
• La page est entière au repos. Le contenu ne doit pas dépendre de l'exécution d'un script : l'état de départ caché est défini uniquement avec l'animation activée, jamais dans les styles de base. Sinon, lorsqu'un script échoue, dans les aperçus et les captures d'écran, l'utilisateur voit un écran vide.
• Le survol change une propriété, pas l'échelle, l'élévation et l'ombre à la fois.
• will-change — avec parcimonie et uniquement pour la durée de l'animation, pas sur tout.

Accessibilité

Ce n'est pas facultatif : le mouvement à l'écran provoque des étourdissements et des nausées chez certaines personnes.

• prefers-reduced-motion: reduce : supprimez le mouvement, l'échelle, la rotation, le parallaxe et la lecture automatique ; conservez le changement en douceur de l'opacité et de la couleur. Tout désactiver prive la personne de retour d'information. L'approche la plus fiable consiste à déclarer le mouvement uniquement là où il est autorisé :

.card { transition: opacity var(--duration-base) var(--ease-out), background-color var(--duration-fast); }

@media (prefers-reduced-motion: no-preference) {
  .card { transition-property: opacity, background-color, transform; }
  .card:hover { transform: translateY(-2px); }
}

• Tout ce qui bouge tout seul pendant plus de 5 secondes (une marquee, un carrousel, une vidéo d'arrière-plan) possède un bouton de pause — une exigence WCAG 2.2.2.
• Rien ne clignote plus de trois fois par seconde.
• Maintenez le mouvement sur une grande zone (parallaxe, mise à l'échelle de l'arrière-plan) à une faible amplitude.
• Le texte animé reste lisible par un lecteur d'écran : une division par caractère reçoit un aria-label avec la phrase entière, et les morceaux reçoivent aria-hidden.

Vérification

• Regardez l'animation dans un navigateur, pas seulement dans le code ; si vous ne pouvez pas, dites à l'utilisateur qu'elle n'a pas été vérifiée en direct.
• Ralentissez-la 4 à 10 fois dans les outils de développement : les saccades, une origine de croissance incorrecte et les propriétés inutiles deviennent visibles.
• Appuyez rapidement plusieurs fois de suite : l'animation doit s'interrompre et s'inverser, ne pas s'empiler dans une file d'attente.
• Activez « réduire le mouvement » dans le système et assurez-vous que l'interface fonctionne toujours et reste compréhensible.
• Une capture d'écran prise juste après le défilement peut montrer un espace vide là où un bloc n'est pas encore apparu — une raison de vérifier la règle « la page est entière au repos ».

Mode révision

Lorsqu'on vous demande d'évaluer ou de corriger une animation existante, rapportez les résultats sous forme de tableau :

Où	Avant	Après	Pourquoi
Modal.tsx:18	scale(0) → 1, 500 ms, ease-in	scale(0.96) + opacité, 220 ms, ease-out	apparaît d'un point et prend du retard

Fichiers de référence

• references/continuity.md — animation connectée : le héros d'un flux, les écrans qui se fondent les uns dans les autres, les nombres qui changent chiffre par chiffre, le repli au défilement ; les techniques et comment les construire sur le web. À lire pour toute séquence d'écrans ou d'états.
• references/choreography.md — un groupe d'éléments réagissant à un seul événement : rôles (meneur, support, décoration, statique), relations au sein d'une paire (ensemble, chevauchement, séquence, portage), décalages, direction, sortie, interruption. À lire chaque fois que plus d'un élément bouge.
• references/gestures.md — tout ce qui est glissé, balayé et lancé : suivi du doigt, interruptibilité, ressorts, transfert de vélocité, projection de momentum, limites douces. À lire pour les feuilles, carrousels, curseurs, glisser-déposer.
• references/showcase-recipes.md — recettes de pages d'accueil avec des valeurs exactes : un titre mot par mot, apparition hors d'un flou, un souligné dessiné, une cascade de cartes, texte au défilement. À lire pour le premier écran et les sections d'un site.
• references/patterns.md — un catalogue de techniques : micro-interactions, entrées, changements de nombre, défilement, transitions de page, texte ; quand chacune fonctionne et quand elle nuit ; le caractère du mouvement par style.
• references/tools.md — une échelle d'outils de CSS à GSAP avec des exemples de code et des règles de sélection.