Vocabulaire de l'animation

Que fait Vocabulaire de l'animation ?

Transformez une description vague d'un mouvement ou d'un effet en le terme précis, pour que l'utilisateur sache quoi demander.

Démarrage rapide

L'utilisateur décrit un effet de manière approximative. Vous renvoyez le(s) terme(s) correspondant(s) dans ce format :

**Stagger** — Anime plusieurs éléments l'un après l'autre avec un petit délai entre chacun, créant une cascade.

Si plusieurs termes peuvent convenir, listez le meilleur d'abord, puis 1 à 2 alternatives avec une note d'une ligne sur leur différence.

Instructions

1. Lisez l'intention, pas les mots-clés. Les utilisateurs décrivent ce qu'ils voient ou ressentent (« élastique », « glisse », « se dessine tout seul »), pas le nom technique. Faites correspondre la sensation au glossaire ci-dessous.
2. Citez le glossaire textuellement. Ses descriptions sont faisant autorité — utilisez-les telles quelles, ne paraphrasez pas.
3. Désambiguïsez les termes proches. Quand deux termes sont en concurrence (Clip-path vs Masque, Pop in vs Rebond, Transition d'élément partagé vs Animation de mise en page), opposez-les pour que l'utilisateur puisse choisir.
4. Quand rien ne correspond exactement, donnez le terme le plus proche et dites clairement que c'est une approximation, ou décrivez l'effet avec le vocabulaire du glossaire (par ex. « c'est un stagger d'entrées scale-in »).
5. Restez dans ce glossaire. Si un terme n'est vraiment pas présent, dites-le plutôt que d'en inventer un — vous pouvez toutefois expliquer le concept en utilisant ces mots.
6. Soyez concis. Une question de nom veut un nom, pas un essai. Commencez par le terme ; développez seulement si on vous le demande.

Exemples

Exemple 1 — basé sur la sensation Utilisateur : « Comment ça s'appelle quand une popup semble sortir du bouton que vous avez cliqué au lieu de son milieu ? » Sortie :

**Animation origin-aware** — Un élément s'anime à partir de son déclencheur, comme une popup qui grandit depuis le bouton qui l'a ouverte plutôt que depuis son propre centre, ce qui est le comportement par défaut en CSS.

Exemple 2 — désambiguïsation Utilisateur : « Le truc où une image se transforme en une autre image. » Sortie :

**Morph** — Une forme se transforme en douceur en une autre forme, ex. Dynamic Island.

Alternatives proches :
- **Crossfade** — si elles se fondent simplement l'une dans l'autre au même endroit.
- **Transition d'élément partagé** — si un élément se déplace et se transforme d'une position à une autre.

Exemple 3 — sensation physique Utilisateur : « Ce défilement iOS qui résiste et rebondit quand on tire trop loin. » Sortie :

**Rubber-banding** — Résistance et retour élastique quand on dépasse une limite (la sensation de dépassement de défilement iOS).

Glossaire

Un instantané sélectionné reflétant la page /vocabulary du projet ; maintenez les deux en synchronisation lorsque l'un ou l'autre change.

Entrées & Sorties — comment les éléments apparaissent et disparaissent

• Fade in / Fade out — L'élément apparaît ou disparaît en modifiant l'opacité.
• Slide in — L'élément entre en glissant depuis l'extérieur de l'écran (gauche, droite, haut ou bas).
• Scale in — L'élément grandit d'une petite taille à sa taille réelle en apparaissant, souvent associé à un fondu.
• Pop in — L'élément apparaît avec un léger dépassement, comme s'il rebondissait pour se mettre en place.
• Reveal — Le contenu est dévoilé progressivement, souvent en animant un clip-path ou un masque.
• Enter / Exit — L'animation que joue un élément quand il est ajouté ou retiré de l'écran.

Séquençage & Timings — coordonner plusieurs éléments ou moments

• Keyframes — Points définis dans une animation (0 %, 50 %, 100 %) que le navigateur remplit entre eux.
• Interpolation / Tween — Génération de toutes les images intermédiaires entre une valeur de début et de fin, rendant le mouvement continu.
• Stagger — Anime plusieurs éléments l'un après l'autre avec un petit délai entre chacun, créant une cascade.
• Orchestration — Chronométrer délibérément plusieurs animations pour qu'elles semblent un seul mouvement coordonné.
• Delay — Temps avant qu'une animation ne commence.
• Duration — Durée d'une animation.
• Fill mode — Indique si un élément conserve les styles de sa première ou dernière image avant que l'animation ne commence ou après qu'elle ne se termine (ex. forwards).
• Stepped animation — Animation divisée en étapes discrètes, comme un compte à rebours.

Mouvement & Transformations — changer la position, la taille ou l'angle d'un élément

• Translate — Déplacer un élément le long de l'axe X ou Y.
• Scale — Agrandir ou rétrécir un élément.
• Rotate — Faire tourner un élément autour d'un point.
• Skew — Incliner un élément le long de l'axe X ou Y, le cisaillant hors de sa forme rectangulaire.
• 3D tilt / Flip — Rotation dans l'espace 3D (rotateX / rotateY) pour ajouter de la profondeur.
• Perspective — Force de l'effet 3D — une valeur faible exagère la profondeur, comme si le spectateur était plus proche.
• Transform origin — Le point d'ancrage à partir duquel une mise à l'échelle ou une rotation grandit ou tourne.
• Animation origin-aware — Un élément s'anime à partir de son déclencheur, comme une popup qui grandit depuis le bouton qui l'a ouverte plutôt que depuis son propre centre, ce qui est le comportement par défaut en CSS.

Transitions Entre États — connecter un état, une vue ou un élément à un autre

• Crossfade — Un élément disparaît tandis qu'un autre apparaît, au même endroit.
• Transition de continuité — Un changement qui maintient l'orientation de l'utilisateur en connectant visuellement l'avant et l'après. Par exemple, agrandir et rétrécir le même rectangle.
• Morph — Une forme se transforme en douceur en une autre forme, ex. Dynamic Island.
• Transition d'élément partagé — Un élément se déplace et se transforme d'une position à une autre, comme une vignette qui se transforme en carte.
• Animation de mise en page — Quand la taille ou la position d'un élément change, il s'anime vers le nouvel emplacement au lieu de sauter.
• Accordéon / Collapse — Une section s'étend et se rétracte en douceur pour afficher ou masquer du contenu.
• Transition direction-aware — Le contenu glisse dans un sens en avant et dans le sens opposé en arrière, donnant une direction à la navigation.

Défilement — mouvement lié au scroll ou à la navigation entre vues

• Scroll reveal — Les éléments apparaissent ou glissent en place à mesure qu'ils entrent dans la zone visible.
• Scroll-driven animation — Animation dont la progression est directement liée à la position de défilement.
• Parallax — L'arrière-plan et le premier plan se déplacent à des vitesses différentes pendant le défilement, créant de la profondeur.
• Transition de page — Animation jouée lors de la navigation d'une page ou route à une autre.
• Transition de vue — Le navigateur morphose entre deux états ou pages, connectant les éléments partagés.

Retour & Interaction — répondre aux actions de l'utilisateur

• Effet de survol — Changement visuel lorsque le curseur passe sur un élément.
• Retour de pression / tap — Une légère réduction d'échelle quand un élément est cliqué, pour donner une sensation physique.
• Hold to confirm — Un effet de progression qui se remplit pendant que l'utilisateur maintient un bouton enfoncé.
• Drag — Déplacer un élément en l'attrapant, souvent avec inertie au relâchement.
• Drag to reorder — Faire glisser des éléments dans une liste pour les réorganiser, pendant que les autres se décalent pour faire de la place.
• Swipe to dismiss — Faire glisser un élément hors de l'écran pour le fermer, comme un tiroir ou un toast.
• Rubber-banding — Résistance et retour élastique quand on dépasse une limite (la sensation de dépassement de défilement iOS).
• Shake / Wiggle — Une secousse rapide de gauche à droite signalant une erreur ou une entrée rejetée.
• Ripple — Un cercle qui s'étend à partir du point d'un tap, confirmant l'appui.

Accélération — comment la vitesse change au cours d'une animation

• Easing — La vitesse à laquelle une animation accélère ou ralentit.
• Ease-out — Commence vite, finit lentement. Par défaut pour la plupart des UI et tout ce qui répond à l'utilisateur.
• Ease-in — Commence lentement, finit vite. Généralement évité ; peut sembler lent.
• Ease-in-out — Lent, rapide, lent. Bon pour les éléments déjà à l'écran qui se déplacent de A à B.
• Linéaire — Vitesse constante. À éviter pour l'UI ; à réserver aux spinners ou marquees.
• Cubic-bezier — Une courbe d'accélération personnalisée que vous définissez pour un contrôle précis.
• Accélération asymétrique — Une courbe qui accélère et décélère à des vitesses différentes. Semblant plus vivante qu'une courbe symétrique.

Animations à ressort — mouvement basé sur la physique comme alternative à l'accélération à durée fixe

• Spring — Mouvement piloté par la physique (tension, masse, amortissement) plutôt qu'une durée fixe.
• Stiffness / Tension — La force avec laquelle le ressort tire vers sa cible. Une valeur plus élevée donne une impression plus rapide.
• Damping — La rapidité avec laquelle un ressort se stabilise. Un amortissement plus faible signifie plus de rebond et d'oscillation.
• Mass — Le poids ressenti de l'élément animé. Plus de masse le rend plus lent et plus lourd.
• Bounce — Un ressort qui dépasse sa cible et se stabilise, ajoutant du côté ludique.
• Durée perçue — Le temps pendant lequel un ressort semble terminé, même s'il continue de micro-osciller en dessous.
• Momentum — Mouvement qui conserve la vélocité, surtout après un glissement ou une interruption.
• Velocity — La vitesse et la direction du mouvement d'un élément. Un ressort la transporte dans l'animation suivante en cas d'interruption, de sorte qu'un élément balayé conserve sa vitesse.
• Animation interruptible — Animation qui peut être redirigée en douceur en plein vol au lieu de devoir se terminer d'abord.

Boucles & Mouvement d'ambiance — animations qui tournent d'elles-mêmes

• Marquee — Texte ou contenu qui défile en continu en boucle.
• Loop — Animation qui se répète, un nombre défini de fois ou à l'infini.
• Alternate (yoyo) — Boucle qui joue en avant puis s'inverse à chaque itération, au lieu de revenir au début en sautant.
• Orbit — Un élément qui tourne autour d'un autre sur un chemin continu.
• Pulse — Un léger changement d'échelle ou d'opacité qui se répète pour attirer l'attention.
• Float — Une légère dérive continue de haut en bas qui donne vie et légèreté à un élément statique.
• Animation au repos — Mouvement subtil joué pendant qu'un élément est simplement là, en attente d'interaction.

Finitions & Effets — les petites touches qui séparent le bon du grand

• Blur — Un filtre de flou utilisé pour adoucir un élément ou masquer de minuscules imperfections.
• Clip-path — Découpage d'un élément selon une forme, utilisé pour les dévoilements, les masques et les curseurs avant/après.
• Mask — Cacher ou révéler des parties d'un élément à l'aide d'une forme ou d'un dégradé — comme clip-path, mais avec des bords doux et fondu.
• Curseur avant / après — Un séparateur déplaçable qui balaie entre deux images superposées pour les comparer.
• Line drawing — Un chemin SVG qui se dessine tout seul, comme une plume invisible qui le trace.
• Text morph — Texte qui s'anime caractère par caractère lorsqu'il change, attirant l'attention sur la nouvelle valeur.
• Skeleton / Shimmer — Un espace réservé avec un reflet mobile affiché pendant le chargement du contenu.
• Number ticker — Chiffres qui défilent ou comptent jusqu'à une valeur.
• Tabular numbers — Chiffres à largeur fixe pour que les nombres ne bougent pas lorsqu'ils changent. Essentiel pour les compteurs, minuteries et décomptes.
• Typewriter — Texte apparaissant un caractère à la fois, comme s'il était tapé.

Performance — ce qui maintient le mouvement fluide au lieu de saccader

• Frame rate (FPS) — Images affichées par seconde. 60 ips est la référence pour un mouvement fluide ; 120 ips sur les écrans plus récents.
• Jank — Saccade visible lorsque le navigateur perd des images car il n'arrive pas à suivre l'animation.
• Dropped frame — Une image que le navigateur n'a pas réussi à dessiner dans les délais, provoquant un petit à-coup dans le mouvement.
• Compositing — Laisser le GPU déplacer ou fondre un élément sur son propre calque sans refaire la mise en page ou la peinture.
• will-change — Un indice CSS qu'un élément va bientôt être animé, permettant au navigateur de le promouvoir sur son propre calque à l'avance.
• Layout thrashing — L'animation de propriétés comme width, height, top ou left qui oblige le navigateur à recalculer la disposition à chaque image, provoquant des saccades.

Principes à Connaître — concepts qui guident quand et comment animer

• Animation intentionnelle — Le mouvement doit servir une fonction — orienter, donner un retour, montrer des relations — pas seulement décorer.
• Anticipation — Un petit mouvement de recul dans la direction opposée avant un déplacement, laissant présager ce qui va se passer.
• Follow-through — Des parties d'un élément continuent de bouger et se stabilisent légèrement après l'arrêt du mouvement principal, ajoutant du poids.
• Squash & stretch — Déformation d'un élément lors de son déplacement pour transmettre le poids, la vitesse et la flexibilité.
• Performance perçue — La bonne animation donne l'impression qu'une interface est plus rapide, même si ce n'est pas le cas.
• Fréquence d'utilisation — Plus un utilisateur voit une animation souvent, plus elle doit être courte et subtile.
• Cohérence spatiale — Animer de sorte qu'un élément conserve son identité et sa position entre les états, pour que les utilisateurs ne perdent jamais de vue où les choses sont allées.
• Accélération matérielle — Animer transform et opacity laisse le GPU maintenir un mouvement fluide.
• Mouvement réduit — Respecter le paramètre prefers-reduced-motion de l'utilisateur en atténuant ou supprimant le mouvement.