Des animations web en direct. Des prompts prêts à coller.

L’élément part réduit et décalé, puis glisse jusqu’à sa place en reprenant sa taille normale.

Ajoute une animation d’entrée « Back In » (aussi appelée back in up ou back in down) sur [où].
L’élément doit arriver depuis l’extérieur d’un bord, réduit et légèrement transparent, puis reprendre sa taille normale une fois à sa place : un mouvement délibéré en deux temps, pas une apparition rapide.
Joue-la une seule fois et affiche l’élément à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément rétrécit et glisse vers un bord en disparaissant en fondu.

Ajoute une animation de sortie « Back Out » sur [où].
L’élément doit d’abord rétrécir légèrement sur place, puis glisser vers un bord en disparaissant en fondu : une sortie délibérée en deux temps, pas un simple fondu rapide.
Retire l’élément seulement à la fin de l’animation pour que la mise en page ne saute pas en plein mouvement, et retire-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément part très flou et devient net, souvent en glissant ou en apparaissant en fondu.

Ajoute une animation d’entrée « Blur In » (aussi appelée text focus in, focus in ou blur text reveal) sur [où].
Le contenu doit partir très flou et transparent, puis devenir net sur place : doux et plutôt lent, sans déplacement.
Joue-la une seule fois et affiche le texte net tout de suite si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément devient de plus en plus flou en disparaissant en fondu ou en glissant hors de vue.

Ajoute une animation de sortie « Blur Out » (aussi appelée text blur out ou smoky text dissipate) sur [où].
Le contenu doit devenir de plus en plus flou en disparaissant sur place : doux et plutôt lent, comme s’il se dissolvait.
Masque ou retire l’élément seulement quand le flou est terminé, et masque-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément entre avec un rebond qui dépasse puis se stabilise, en grandissant ou en tombant depuis un bord.

Ajoute une animation d’entrée « Bounce In » (aussi appelée bounce in down ou bounce in up) sur [où].
L’élément doit grandir à partir d’une petite taille, dépasser sa taille normale et osciller quelques fois avant de se stabiliser : rapide et élastique.
Joue-la une seule fois pour qu’elle n’attire pas l’attention en continu, et affiche l’élément à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément rebondit légèrement, puis rétrécit ou s’envole par un bord.

Ajoute une animation de sortie « Bounce Out » sur [où].
L’élément doit s’enfoncer légèrement, gonfler un peu au-delà de sa taille, puis rétrécir en disparaissant en fondu : court et élastique.
Retire-le de la mise en page seulement à la fin de l’animation, et masque-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un clip-path ou un masque s’agrandit depuis un bord ou un point et découvre peu à peu l’image ou le texte.

Ajoute un effet d’entrée « Clip Reveal » (aussi appelé mask reveal, wipe reveal ou image reveal) sur [où].
Un bord de découpe doit balayer de gauche à droite pour découvrir progressivement le contenu, qui reste immobile : fluide, avec un début et une fin en douceur.
Réserve l’espace de l’élément dès le départ pour que rien ne se décale, et affiche-le entièrement découvert si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément passe sur place de totalement transparent à totalement opaque, ou l’inverse quand il disparaît.

Ajoute une animation de fondu (Fade In / Fade Out) sur [où], aussi appelée fade.
L’élément doit passer sur place de totalement transparent à totalement visible quand il apparaît, et disparaître en fondu de la même façon quand il s’en va : doux, sans déplacement ni changement d’échelle.
Une fois disparu, assure-toi qu’il ne soit plus cliquable ni accessible au clavier, et bascule instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément apparaît en fondu en glissant sur une courte distance depuis un côté jusqu’à sa position finale.

Ajoute une animation d’entrée « Fade In Directional » (aussi appelée fade in left, fade in right ou fade in down) sur [où].
L’élément doit apparaître en fondu en glissant sur une courte distance depuis un côté jusqu’à sa position finale : rapide et fluide, en ralentissant à l’arrivée, sans rebond.
Joue-la une seule fois et affiche l’élément à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément disparaît en fondu en glissant dans une direction.

Ajoute une animation de sortie « Fade Out Directional » (aussi appelée fade out up ou fade out down) sur [où].
L’élément doit disparaître en fondu en glissant sur une courte distance dans une direction : rapide, en accélérant à la sortie.
Retire-le de la mise en page seulement à la fin du fondu pour que le contenu voisin ne saute pas trop tôt, et masque-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément monte légèrement tout en apparaissant en fondu, comme s’il se posait à sa place.

Ajoute une animation d’entrée « Fade Up » (aussi appelée fade-in-up ou reveal on scroll) sur [où].
Les éléments doivent monter légèrement en apparaissant en fondu la première fois qu’ils entrent à l’écran au défilement : discret et rapide, sans rebond.
Joue-la une seule fois et supprime le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément s’allume par de brefs clignotements d’opacité, comme une enseigne néon défectueuse, avant de rester visible.

Ajoute une animation d’entrée « Flicker In » sur [où].
L’élément doit s’allumer et s’éteindre quelques fois à intervalles irréguliers, comme une enseigne néon défectueuse, avant de rester allumé : des flashs nets, sans déplacement.
Joue-la une seule fois, avec peu de flashs et assez lents pour ne pas gêner les personnes sensibles aux lumières clignotantes, et affiche-le allumé en continu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément fait un tour complet autour de l’axe Y en s’approchant légèrement du spectateur puis en revenant.

Ajoute une animation « Flip » sur [où].
L’élément doit faire un tour complet autour de son axe vertical en s’approchant légèrement du spectateur, puis revenir avec une infime baisse de taille : vif mais bref.
Donne-lui de la perspective pour que la rotation se lise en profondeur, joue-la une seule fois plutôt qu’en boucle, et supprime la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément pivote en 3D autour de son axe horizontal ou vertical, de la tranche jusqu’à faire face au spectateur.

Ajoute une animation d’entrée « Flip In » (aussi appelée flip in X ou flip in Y) sur [où].
L’élément doit partir de la tranche et pivoter autour de son axe horizontal pour faire face au spectateur, en dépassant légèrement puis en revenant avant de se stabiliser : rapide, avec une petite oscillation.
Donne-lui de la perspective pour que la rotation se lise en profondeur, et affiche-le de face sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément pivote en 3D jusqu’à être vu par la tranche et devenir invisible.

Ajoute une animation de sortie « Flip Out » (aussi appelée flip out X ou flip out Y) sur [où].
L’élément doit s’incliner légèrement vers l’arrière, puis pivoter autour de son axe vertical jusqu’à être vu par la tranche et disparaître : rapide et net.
Donne-lui de la perspective pour que la rotation se lise en profondeur, retire l’élément seulement à la fin de la rotation, et masque-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément pivote sur une charnière en haut à gauche, se balance, puis tombe hors de l’écran.

Ajoute une animation de sortie « Hinge » sur [où].
L’élément doit basculer depuis son coin supérieur gauche comme si une vis s’était desserrée, se balancer d’avant en arrière, puis tomber hors de l’écran en disparaissant en fondu : lent, comique et délibéré.
Laisse-le tomber par-dessus le reste du contenu sans pousser la mise en page ni ajouter de barres de défilement, retire-le une fois tombé, et masque-le immédiatement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément jaillit d’un état réduit et incliné, dépasse puis se stabilise comme un diable en boîte.

Ajoute une animation d’entrée « Jack In The Box » sur [où].
L’élément doit jaillir d’un état minuscule et incliné, ancré sur son bord inférieur, se balancer d’un côté à l’autre au-delà de la verticale, puis se stabiliser : élastique et ludique.
Joue-la une seule fois et affiche l’élément à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément surgit d’un côté, incliné, puis se redresse en arrivant.

Ajoute une animation d’entrée « Light Speed In » (aussi appelée lightspeed in) sur [où].
L’élément doit surgir rapidement d’un côté, incliné comme s’il filait à toute vitesse, corriger une fois son inclinaison un peu trop loin puis se redresser en arrivant : rapide et spectaculaire, avec un ralentissement à la fin.
Évite qu’il crée une barre de défilement horizontale tant qu’il est encore hors de l’écran, et affiche-le à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément s’incline et file sur le côté en disparaissant en fondu.

Ajoute une animation de sortie « Light Speed Out » (aussi appelée lightspeed out) sur [où].
L’élément doit s’incliner et filer sur le côté en disparaissant en fondu : rapide, en accélérant à la sortie.
Évite qu’il crée une barre de défilement horizontale en passant le bord, et masque-le instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément passe d’un état agrandi, flou et transparent à une image nette, comme une bouffée de fumée, et inversement en sortant.

Ajoute une animation « Puff In / Puff Out » (aussi appelée puff) sur [où].
À l’apparition, l’élément doit rétrécir depuis un état agrandi, flou et transparent jusqu’à devenir net, comme une bouffée de fumée qui retombe ; à la sortie, il doit regonfler dans un flou et s’évanouir : doux et assez rapide.
Évite que l’état agrandi pousse la mise en page ou crée des barres de défilement, et bascule instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément arrive en roulant depuis la gauche comme une roue, tout en apparaissant en fondu.

Ajoute une animation d’entrée « Roll In » sur [où].
L’élément doit arriver en roulant depuis la gauche comme une roue, en tournant sur lui-même pendant son trajet, tout en apparaissant en fondu : fluide, avec un ralentissement à l’arrivée.
Joue-la une seule fois et affiche l’élément à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément s’en va en roulant vers la droite tout en disparaissant en fondu.

Ajoute une animation de sortie « Roll Out » sur [où].
L’élément doit s’en aller en roulant vers la droite comme une roue, en tournant sur lui-même pendant son trajet, tout en disparaissant en fondu : fluide, en accélérant à la sortie.
Ne le retire de la mise en page qu’une fois qu’il s’est éloigné, et masque-le instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément entre en pivotant autour d’un coin ou de son centre, tout en apparaissant en fondu.

Ajoute une animation d’entrée « Rotate In » (aussi appelée rotate in down left) sur [où].
L’élément doit pivoter jusqu’à sa place autour de son coin inférieur gauche, depuis un angle incliné, tout en apparaissant en fondu : fluide et posé, avec un ralentissement en se stabilisant.
Joue-la une seule fois et affiche l’élément à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément pivote autour d’un point tout en disparaissant en fondu.

Ajoute une animation de sortie « Rotate Out » sur [où].
L’élément doit tourner autour de son centre, d’un peu plus d’un demi-tour, tout en disparaissant en fondu : fluide, en accélérant.
Ne le retire qu’une fois la rotation terminée, et masque-le instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément glisse depuis l’extérieur du bord de son conteneur jusqu’à sa position de repos, sans fondu.

Ajoute une animation d’entrée « Slide In » (aussi appelée slide in left, slide in right, slide in up ou slide in down) sur [où].
L’élément doit glisser depuis l’extérieur du bord de son conteneur jusqu’à sa place, entièrement opaque du début à la fin : rapide, avec une décélération douce et sans rebond.
Rogne-le au bord du conteneur pour qu’il ne chevauche pas ses voisins et ne crée pas de barres de défilement tant qu’il est dehors, et affiche-le directement à sa place si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément glisse au-delà du bord d’un conteneur et disparaît.

Ajoute une animation de sortie « Slide Out » (aussi appelée slide out up ou slide out down) sur [où].
L’élément doit glisser au-delà du bord de son conteneur et disparaître, en restant entièrement opaque : rapide, en accélérant à la sortie.
Rogne-le au bord du conteneur, rends-le inaccessible au clavier et aux lecteurs d’écran une fois hors de vue, et masque-le instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les éléments d’un groupe s’animent l’un après l’autre avec un léger décalage, formant une vague au lieu d’apparaître tous en même temps.

Ajoute une animation « Stagger » (aussi appelée staggered animation ou cascade) sur [où].
Les éléments doivent apparaître en montant l’un après l’autre avec un décalage court et régulier, pour que le groupe forme une vague rapide plutôt que d’apparaître d’un coup.
Garde la séquence courte même pour de longues listes, joue-la une seule fois à l’entrée à l’écran et supprime le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément tourne et grandit à partir d’un point tout en apparaissant en fondu.

Ajoute une animation d’entrée « Swirl In » (aussi appelée swirl in forward) sur [où].
L’élément doit faire bien plus d’un tour complet en grandissant à partir d’un seul point jusqu’à sa taille normale, tout en apparaissant en fondu : rapide au début, puis ralentissant en se stabilisant.
Joue-la une seule fois sur un seul élément plutôt que sur tout un groupe, et affiche-le à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres commencent très espacées et estompées, puis se resserrent jusqu’à l’espacement normal en apparaissant.

Ajoute une animation de texte « Tracking In » (aussi appelée text tracking in ou letter-spacing in) sur [où].
Les lettres doivent commencer très espacées et pâles, puis se resserrer jusqu’à l’espacement normal en devenant entièrement visibles : fluide, avec un ralentissement à la fin.
Garde le texte centré et sur une seule ligne pendant le changement d’espacement pour que la mise en page autour ne bouge pas, et affiche-le avec l’espacement normal si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément grandit depuis un état réduit et transparent jusqu’à sa taille normale en apparaissant en fondu.

Ajoute une animation d’entrée « Zoom In » (aussi appelée scale in) sur [où].
L’élément doit passer de petit et transparent à sa taille normale en apparaissant en fondu : rapide et fluide, sans dépassement.
Mets-le à l’échelle depuis son centre sans affecter la mise en page autour, et affiche-le à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément rétrécit et s’estompe jusqu’à disparaître.

Ajoute une animation de sortie « Zoom Out » (aussi appelée scale out) sur [où].
L’élément doit rétrécir vers son centre en s’estompant jusqu’à disparaître : rapide, en accélérant.
Ne le retire de la mise en page et du focus clavier qu’une fois disparu, et masque-le instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément sautille de haut en bas avec des rebonds de plus en plus faibles.

Ajoute un effet d’attention « Bounce » sur [où].
L’élément doit sauter puis retomber en quelques rebonds rapides, de plus en plus petits, avec un léger écrasement à chaque atterrissage.
Joue-le une seule fois au déclenchement plutôt qu’en boucle, et désactive-le si l’utilisateur a activé la réduction des animations.

L’élément clignote en faisant varier rapidement son opacité.

Ajoute un effet d’attention « Flash » (aussi appelé blink) sur [où].
L’élément doit clignoter en disparaissant puis réapparaissant rapidement deux fois, puis rester entièrement visible.
Joue-le une seule fois plutôt qu’en clignotement sans fin, et désactive-le si l’utilisateur a activé la réduction des animations, car un clignotement rapide peut être gênant.

L’opacité de l’élément vacille de façon irrégulière, comme une lampe défaillante.

Ajoute un effet « Flicker » (aussi appelé flickering) sur [où].
L’élément doit rester stable la plupart du temps et baisser d’intensité par brefs à-coups irréguliers, comme un néon défaillant.
Garde un rythme irrégulier plutôt que régulier, évite les flashs rapides à pleine intensité, et arrête-le si l’utilisateur a activé la réduction des animations.

L’élément oscille de gauche à droite avec une légère rotation, comme une tête qui fait non.

Ajoute un effet d’attention « Head Shake » (aussi appelé headshake ou no shake) sur [où].
L’élément doit pivoter rapidement de gauche à droite avec une légère torsion, comme une tête qui fait non, chaque mouvement plus petit que le précédent jusqu’à s’immobiliser.
Joue-le une fois à chaque déclenchement, par exemple lors d’une action refusée, et empêche la mise en page autour de bouger.

L’élément grossit et rétrécit selon un double battement, comme un cœur qui bat.

Ajoute un effet « Heartbeat » (aussi appelé heart beat) sur [où].
L’élément doit gonfler puis se relâcher en un double battement rapide, puis marquer une courte pause avant le suivant, comme un cœur qui bat.
Fais-le tourner en boucle sans coupure en gardant la pause entre les battements, et arrête-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément se déforme d’un côté à l’autre avec une amplitude décroissante, comme une gelée qui tremblote.

Ajoute un effet d’attention « Jello » (aussi appelé jelly) sur [où].
L’élément doit se déformer d’un côté à l’autre comme une gelée qui tremblote : fort au début, puis se stabilisant rapidement.
Joue-le une fois au déclenchement et conserve l’encombrement de l’élément pour que le contenu voisin ne bouge pas.

Une copie de l’élément s’agrandit et s’estompe en boucle, comme une onde de radar.

Ajoute un effet « Ping » (aussi appelé radar ping ou pulse ring) sur [où].
Une copie de l’élément doit s’agrandir vers l’extérieur et s’estomper, encore et encore à un rythme régulier, pendant que l’élément lui-même reste immobile.
Dessine l’anneau sur un calque séparé pour qu’il ne modifie jamais la mise en page, et arrête la boucle si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément grossit ou s’estompe doucement, puis revient, de façon répétée.

Ajoute un effet « Pulse » (aussi appelé pulsing) sur [où].
L’élément doit gonfler doucement puis revenir selon un rythme lent et régulier : discret, sans rebond.
Fais-le tourner en boucle sans coupure sans décaler la mise en page autour, et arrête-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément s’étire en largeur et s’écrase en hauteur par à-coups élastiques avant de reprendre sa forme normale.

Ajoute un effet d’attention « Rubber Band » (aussi appelé rubberband) sur [où].
L’élément doit s’étirer en largeur et s’écraser en hauteur, puis revenir par quelques petits rebonds élastiques avant de se stabiliser à sa taille normale.
Joue-le une fois au déclenchement et empêche la mise en page autour de se décaler pendant qu’il s’étire.

L’élément tremble rapidement d’avant en arrière sur un seul axe.

Ajoute un effet « Shake » (aussi appelé error shake ou invalid input shake) sur [où].
L’élément doit trembler rapidement de gauche à droite quelques fois et s’arrêter exactement à son point de départ : rapide et ferme.
Joue-le une fois à chaque erreur plutôt qu’en boucle, et associe-le à un message d’erreur visible pour que le sens ne repose pas uniquement sur le mouvement.

L’élément tourne en continu à vitesse constante.

Ajoute un effet « Spin » (aussi appelé spinner ou rotate loop) sur [où].
L’élément doit tourner en continu à une vitesse constante et régulière, sans easing entre les tours.
Rends la boucle continue, donne au spinner un libellé de chargement accessible, et ralentis-le ou arrête-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément se balance d’un côté à l’autre depuis son bord supérieur, comme un pendule dont l’amplitude décroît.

Ajoute un effet d’attention « Swing » sur [où].
L’élément doit se balancer d’un côté à l’autre comme une enseigne suspendue, avec un grand mouvement au départ qui s’amortit vite.
Fais-le pivoter depuis son bord supérieur plutôt que depuis son centre, et joue-le une fois au déclenchement.

L’élément grossit, se trémousse en pivotant puis reprend sa taille, comme pour célébrer.

Ajoute un effet d’attention « Tada » sur [où].
L’élément doit rapetisser légèrement, puis grandir et se trémousser de gauche à droite avec une inclinaison rapide avant de reprendre sa taille normale, comme une petite célébration.
Joue-le une fois, par exemple juste après une réussite, et supprime-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément tremble très vite par de petites secousses dans plusieurs directions, comme un téléphone qui vibre.

Ajoute un effet d’attention « Vibrate » (aussi appelé buzz ou vibration) sur [où].
L’élément doit trembler par de minuscules secousses rapides dans différentes directions pendant un bref instant, comme un téléphone qui vibre, puis s’immobiliser.
Garde un mouvement très faible pour que le contenu reste lisible, et joue-le une fois par alerte plutôt qu’en boucle.

L’élément oscille de gauche à droite en s’inclinant, comme un objet instable.

Ajoute un effet d’attention « Wobble » sur [où].
L’élément doit osciller de gauche à droite en s’inclinant, avec un grand balancement au départ qui diminue à chaque aller-retour jusqu’à s’immobiliser.
Joue-le une fois au déclenchement et empêche le contenu voisin de se décaler.

Un en-tête se masque quand on fait défiler vers le bas et réapparaît quand on remonte.

Ajoute un « Hide on Scroll Header » (aussi appelé headroom ou auto-hide navbar) sur [où].
L’en-tête doit glisser vers le haut hors de la vue quand on fait défiler vers le bas et revenir dès qu’on remonte : rapide et fluide, en réagissant au sens du défilement plutôt qu’à la distance.
Affiche-le toujours tout en haut de la page, ignore les petits à-coups de défilement, et garde-le visible tant qu’un élément à l’intérieur a le focus clavier.

Le défilement vertical fait glisser latéralement une rangée de panneaux épinglée.

Ajoute une section à défilement horizontal (Horizontal Scroll Section) sur [où], aussi appelée horizontal scrolling ou scroll-jacked horizontal gallery.
Quand la section atteint le haut, elle doit rester épinglée pendant que le défilement vers le bas fait glisser sa rangée de panneaux sur le côté, puis se libérer une fois le dernier panneau visible.
Lie le mouvement latéral directement à la position de défilement pour que remonter l’inverse, et reviens à une rangée normale qu’on fait glisser au doigt sur petit écran ou si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Des calques se déplacent à des vitesses différentes au défilement pour créer une impression de profondeur.

Ajoute un effet de parallaxe (Parallax) au défilement sur [où], aussi appelé parallax scrolling ou parallax layers.
Les calques d’arrière-plan doivent se déplacer plus lentement que le contenu pendant le défilement, le plus éloigné bougeant le moins, pour une impression de profondeur discrète.
Garde-le lié à la position de défilement sans décalage, laisse le texte sur le calque à vitesse normale, et désactive l’effet si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un élément reste fixé sur place pendant une portion du défilement tandis que le reste du contenu ou l’animation progresse.

Ajoute un effet de défilement « Pinning » (aussi appelé pinned section ou sticky section) sur [où].
Un panneau doit rester fixé sur place pendant que le contenu à côté défile, en changeant selon l’étape en cours de lecture, puis se libérer à la fin de la section.
Préfère le positionnement sticky natif plutôt que de détourner le défilement, et assure-toi que chaque étape reste lisible sans le panneau épinglé sur petit écran.

Une barre ou un anneau se remplit à mesure que l’utilisateur fait défiler la page ou l’article.

Ajoute une barre de progression de lecture (Scroll Progress Indicator, aussi appelée reading progress bar) sur [où].
Une fine barre en haut doit se remplir de gauche à droite au fil du défilement, jusqu’à occuper toute la largeur à la fin.
Lie-la directement à la position de défilement, sans retard de lissage, et fais en sorte qu’elle ne masque pas le contenu.

Le défilement se cale sur des points d’accroche définis, comme des diapositives ou des sections.

Ajoute « Scroll Snap » (aussi appelé scroll snapping ou snap scrolling) sur [où].
Quand le défilement s’arrête, la vue doit se caler proprement sur la section la plus proche, pour que chacune s’aligne sur le bord au lieu de s’arrêter à mi-chemin.
Utilise l’accroche native du navigateur pour que la molette, le tactile et le clavier continuent de fonctionner, et vérifie qu’un contenu plus haut que la vue reste lisible en entier.

La progression de l’animation est liée directement à la position de défilement : défiler vers l’avant ou l’arrière la joue ou la rembobine.

Ajoute une « Scroll-Linked Animation » (aussi appelée scroll-driven animation ou scroll scrub) sur [où].
L’animation doit suivre exactement la position de défilement : descendre la fait avancer, remonter la rembobine aussitôt, sans easing temporel propre.
Associe toute l’animation à une plage de défilement claire, et affiche un état statique cohérent si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une animation se joue une fois quand un élément entre dans le viewport ou en sort.

Ajoute une « Scroll-Triggered Animation » (aussi appelée reveal on scroll ou animate on scroll) sur [où].
Chaque élément doit apparaître en fondu et glisser vers le haut jusqu’à sa place une seule fois en entrant à l’écran, à son propre rythme rapide et fluide plutôt qu’en suivant la position de défilement.
Garde le contenu visible si les scripts ne se chargent pas, et affiche les éléments directement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Le défilement et les sauts vers les ancres glissent avec un amorti au lieu de bouger brusquement.

Ajoute un défilement fluide (Smooth Scroll, aussi appelé smooth scrolling ou inertia scroll) sur [où].
Le défilement et les sauts vers les ancres doivent glisser et ralentir en douceur au lieu d’avancer par à-coups, avec une sensation légère et réactive plutôt qu’un retard pesant.
Conserve le comportement natif, comme le défilement au clavier, la barre de défilement et la recherche dans la page, et désactive le lissage si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les cartes restent collées en haut au défilement et s’empilent les unes sur les autres, en réduisant souvent les précédentes.

Ajoute des « Stacking Cards » (aussi appelées sticky stacking cards ou card stack scroll) sur [où].
Au défilement, chaque carte doit rester collée près du haut et la suivante doit glisser par-dessus, tandis que les cartes du dessous rétrécissent légèrement pour former une pile nette.
Laisse dépasser un fin bord de chaque carte précédente, et donne à la dernière assez de place pour atteindre sa position avant la fin de la section.

Un en-tête fixe réduit sa hauteur ou sa taille quand l’utilisateur fait défiler vers le bas.

Ajoute un « Sticky Header Shrink » (aussi appelé shrinking header ou shrink on scroll) sur [où].
L’en-tête doit rester en haut et, dès que le lecteur descend un peu, se réduire en douceur en une barre plus fine avec un logo plus petit, puis reprendre sa taille quand il revient tout en haut.
Évite que le contenu en dessous ne saute pendant que l’en-tête change de taille.

De grandes lignes de texte glissent horizontalement pendant que la page défile verticalement.

Ajoute un « Text Marquee on Scroll » (aussi appelé scroll text marquee ou scroll velocity text) sur [où].
De grandes lignes de texte doivent glisser latéralement quand la page défile vers le bas, une ligne sur deux dans le sens opposé, puis revenir quand on remonte.
Lie le mouvement à la position de défilement, empêche les longues lignes de créer une barre de défilement horizontale, et garde-les immobiles si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un élément ou une scène s’agrandit ou rétrécit au fil du défilement.

Ajoute un effet « Zoom on Scroll » (aussi appelé scroll zoom ou scale on scroll) sur [où].
Tant que la section reste à l’écran, l’élément doit grandir en douceur d’une petite carte jusqu’à remplir toute la vue, au rythme du défilement, puis rétrécir quand on remonte.
Mets-le à l’échelle sans décaler la mise en page autour, et affiche-le à sa taille finale sans zoom si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un texte rempli d’un dégradé dont les couleurs changent ou s’écoulent en continu.

Ajoute un effet « Animated Gradient Text » (aussi appelé aurora text ou rainbow text sweep) sur [où].
Les lettres doivent être remplies d’un dégradé dont les couleurs s’écoulent lentement et en douceur sur le texte, en boucle infinie et sans coupure.
Garde le texte lisible sur son fond à tout instant, et fige les couleurs si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Le texte tressaute avec des tranches décalées et des séparations de couleur rouge et cyan, comme un signal brouillé.

Ajoute un effet de survol « Glitch Text » (aussi appelé text glitch ou RGB split glitch) sur [où].
Tant que le pointeur survole le texte, il doit tressauter par à-coups vifs et secs : de fines tranches horizontales sautent de côté et deux copies colorées se séparent comme un signal brouillé, puis tout se remet en place quand le pointeur s’en va.
Ne garde le vrai texte qu’une seule fois dans le document pour que les lecteurs d’écran ne lisent pas les copies, et affiche le même effet au focus clavier.

Le texte affiche des reflets irisés façon feuille holographique, qui bougent avec le pointeur ou au fil du temps.

Ajoute un effet de survol « Holographic Text » (aussi appelé holographic foil text) sur [où].
Tant que le pointeur survole le texte, une bande de couleurs façon feuille holographique doit glisser lentement et en douceur d’avant en arrière sur les lettres, et le texte doit retrouver son aspect normal quand le pointeur s’en va.
Garde les lettres lisibles à chaque instant du reflet, et affiche le même effet au focus clavier.

Le texte change d’échelle, se déplace ou pivote comme un élément graphique animé plutôt que comme un texte statique.

Ajoute une typographie cinétique (Kinetic Typography, aussi appelée kinetic text) sur [où].
Des lignes de grand texte répété doivent glisser latéralement en sens alternés, à un rythme lent et régulier, pour transformer les mots en graphisme animé.
Fais boucler chaque ligne sans saut visible, veille à ce que les lecteurs d’écran ne lisent le texte qu’une fois, et arrête le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres s’éparpillent au survol puis reviennent, ou éclatent vers l’extérieur à l’apparition.

Ajoute un effet de survol « Letter Scatter » (aussi appelé scatter gather letters ou explosive letter burst) sur [où].
Quand le pointeur passe sur le texte, chaque lettre doit s’envoler un peu dans sa propre direction avec une légère rotation, puis se regrouper en douceur dans le mot quand le pointeur s’en va.
Garde fixe la place du mot dans la mise en page pendant que les lettres bougent, fais-le lire comme un seul mot par les lecteurs d’écran, et affiche le même effet au focus clavier.

Une ombre rayée ou décalée derrière les lettres s’anime dans une direction.

Ajoute un effet « Line Shadow Text » (aussi appelé text shadow animation ou dancing shadow) sur [où].
Derrière les lettres, une ombre décalée faite de fines rayures diagonales doit glisser lentement et en continu, tandis que les lettres elles-mêmes restent immobiles et nettes.
Fais boucler le mouvement des rayures sans coupure, et fige l’ombre si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres se remplissent d’un liquide qui monte en ondulant.

Ajoute un effet « Liquid Fill Text » (aussi appelé water fill text) sur [où].
Les lettres détourées doivent se remplir d’un liquide dont la surface ondulée roule latéralement pendant que le niveau monte et descend lentement, en boucle douce et continue.
Garde le mot disponible en texte réel pour les lecteurs d’écran, et fixe le liquide à un niveau immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Le texte glisse vers le haut depuis derrière une ligne de découpe, comme s’il surgissait de nulle part.

Ajoute une entrée de texte « Mask Reveal » (aussi appelée line mask reveal ou text masking) sur [où].
Chaque ligne doit glisser vers le haut depuis derrière un bord invisible, comme si elle surgissait de nulle part, l’une après l’autre, rapide et fluide, sans rebond.
Joue-la une seule fois quand le texte entre à l’écran au défilement, et affiche le texte tout de suite, sans mouvement, si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Des caractères verts tombent en colonnes, comme la pluie de code de Matrix.

Ajoute un effet « Matrix Text » (aussi appelé digital rain text) sur [où].
Des colonnes de caractères doivent tomber régulièrement à des vitesses légèrement différentes, chacune avec un caractère de tête lumineux et une traîne qui s’estompe derrière.
Traite-le comme une décoration masquée aux lecteurs d’écran, garde-le léger et arrête-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres coulent et s’étirent vers le bas comme si elles fondaient.

Ajoute un effet « Melting Text » sur [où].
Les lettres doivent s’affaisser lentement pendant que des gouttes s’étirent en dessous, comme si elles fondaient, puis s’immobiliser dans un aspect fondu.
Joue-le une seule fois quand le texte apparaît à l’écran, garde le mot lisible à la fin et supprime le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un mot se floute et se fond dans le suivant au même endroit.

Ajoute un effet « Morphing Text » (aussi appelé text morph) sur [où].
Un mot doit se flouter et fondre dans le suivant au même endroit, avec une fusion douce et gluante, puis rester immobile un instant avant le changement suivant.
Fais défiler les mots sans coupure, laisse les lecteurs d’écran lire les mots comme du texte normal et arrête le cycle si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Le texte brille comme un tube néon et clignote ou pulse.

Ajoute un effet « Neon Glow Text » (aussi appelé neon sign flicker ou glowing text) sur [où].
Le texte doit briller comme un tube néon, d’une lumière douce et régulière, et de temps en temps s’éteindre brièvement comme une vraie enseigne.
Garde le clignotement occasionnel plutôt que rapide, car les flashs rapides peuvent nuire à certains utilisateurs, et garde la lueur fixe si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres d’un titre se mélangent ou bougent l’une après l’autre à mesure que l’utilisateur fait défiler les sections.

Ajoute « Scrolling Letters » (aussi appelé on-scroll letter animations) sur [où].
À mesure que l’utilisateur fait défiler les sections, les lettres du titre doivent rouler vers leur caractère suivant l’une après l’autre de gauche à droite, liées directement à la position de défilement.
En remontant, elles doivent revenir en arrière, et les lecteurs d’écran doivent recevoir le titre actuel comme du texte normal.

Un reflet lumineux balaie les lettres à plusieurs reprises.

Ajoute un effet « Shimmer Text » (aussi appelé animated shiny text ou metallic shimmer text) sur [où].
Une bande de lumière doit balayer les lettres en douceur de gauche à droite, puis recommencer après une courte pause.
Garde le texte lisible sous le reflet et laisse-le immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un titre est découpé en tranches horizontales qui glissent latéralement les unes contre les autres au défilement.

Ajoute un effet « Sliced Text » (aussi appelé on-scroll sliced text) sur [où].
Un grand titre doit être découpé en tranches horizontales qui glissent latéralement les unes contre les autres au défilement, alignées en un mot complet au départ.
Lie le décalage directement à la position de défilement pour qu’il s’inverse en remontant, et garde le titre comme un seul texte lisible pour les lecteurs d’écran.

Le texte est disposé autour d’un cercle qui tourne en continu.

Ajoute « Spinning Text » (aussi appelé circular text ou text on circle) sur [où].
Les lettres doivent être réparties uniformément autour d’un cercle qui tourne lentement et régulièrement, sans saut quand la boucle recommence.
Donne le texte une seule fois aux lecteurs d’écran comme du texte normal, et arrête la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un titre est découpé en caractères, mots ou lignes qui s’animent l’un après l’autre avec un léger décalage.

Ajoute une entrée « Split Text Stagger » (aussi appelée letter stagger ou staggered text reveal) sur [où].
Découpe le titre en lettres qui montent et apparaissent en fondu l’une après l’autre avec un court délai entre elles, rapide et fluide, sans rebond.
Joue-la une seule fois quand le titre apparaît à l’écran, fais en sorte que les lecteurs d’écran le lisent comme un seul mot, et affiche-le sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les caractères défilent comme sur un tableau des départs d’aéroport jusqu’à s’arrêter sur la lettre voulue.

Ajoute un afficheur à palettes (Split-Flap Text) sur [où] : aussi appelé text flipping board ou flip board.
Chaque case de caractère doit défiler rapidement dans l’alphabet jusqu’à s’arrêter sur sa lettre cible, les cases se fixant l’une après l’autre de gauche à droite.
Lance-le une fois à chaque fois que le texte apparaît ou change, n’annonce que le texte final aux lecteurs d’écran, et affiche le texte final sans défilement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les contours des lettres ondulent comme dessinés à la main, grâce à un filtre de déplacement SVG.

Ajoute un effet « Squiggly Text » (aussi appelé wobbly text ou turbulence text) sur [où].
Les contours des lettres doivent trembler légèrement comme s’ils étaient dessinés à la main et redessinés plusieurs fois par seconde : un frémissement discret et saccadé plutôt qu’une onde fluide.
Garde le texte lisible et laisse-le immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Le texte reste épinglé pendant que ses lignes apparaissent et disparaissent en fondu selon la progression du défilement.

Ajoute un effet « Sticky Text Fade » (aussi appelé sticky scroll text opacity fade) sur [où].
Pendant le défilement de la section, le bloc de texte doit rester épinglé en place et ses lignes doivent apparaître et disparaître en fondu une à une selon la progression du défilement.
Lie les fondus directement à la position de défilement pour qu’ils s’inversent en remontant, et garde chaque ligne accessible aux lecteurs d’écran, quelle que soit son opacité.

Les contours des lettres se tracent d’un trait avant que le remplissage n’apparaisse.

Ajoute un effet « Stroke Text Draw » (aussi appelé draw in text ou animated stroke text) sur [où].
Les contours des lettres doivent se tracer d’eux-mêmes en douceur, puis, une fois complets, le remplissage doit apparaître en fondu.
Joue-le une seule fois au chargement, garde le mot accessible comme du vrai texte, et affiche directement le texte rempli si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres ou les mots pivotent en 3D autour d’un axe pour révéler le texte suivant sur leur face arrière.

Ajoute un effet de survol « Text 3D Flip » (aussi appelé 3D flip text reveal) sur [où].
Quand le pointeur est sur le texte, chaque lettre doit basculer en 3D sur son axe horizontal pour montrer une nouvelle lettre sur son autre face, l’une après l’autre dans un balayage rapide et fluide, puis revenir quand le pointeur s’en va.
Garde la même taille de boîte de texte pendant la bascule et montre le même effet au focus clavier.

Le texte se déforme et ondule de façon organique, piloté par le défilement ou le mouvement du pointeur.

Ajoute un effet « Text Distortion » (aussi appelé organic text distortion) sur [où].
Une ligne de texte doit défiler latéralement sans fin et se déformer et onduler de façon organique en bougeant, comme vue à travers de l’eau en mouvement, le flux étant piloté par le défilement de l’utilisateur.
Garde la distorsion assez légère pour que le texte reste lisible, assure-toi qu’elle reste fluide sur les appareils plus lents, et désactive-la si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les mots apparaissent en fondu les uns après les autres au chargement de la page, souvent avec un flou qui se dissipe, comme s’ils étaient générés.

Ajoute un effet « Text Generate » sur [où].
Les mots doivent apparaître en fondu les uns après les autres pendant qu’un léger flou se dissipe sur chacun, comme si le texte était en train d’être généré : régulier et calme.
Joue-le une seule fois au chargement, laisse les lecteurs d’écran lire tout le texte immédiatement et affiche-le sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une bande de couleur façon surligneur se trace sur une expression pour la mettre en valeur.

Ajoute un effet surligneur (Text Highlighter) sur [où], aussi appelé highlight marker ou marker underline.
Une bande de couleur façon surligneur doit glisser en douceur derrière l’expression clé, de gauche à droite, comme si quelqu’un la surlignait au feutre.
Joue-le une seule fois quand l’expression entre à l’écran au défilement, garde le texte lisible sur la bande et fais suivre correctement la bande quand l’expression passe sur deux lignes.

Un mot en contour se remplit ou s’illumine d’un dégradé qui suit le pointeur ou le balaie.

Ajoute un « Text Hover Effect » (aussi appelé text fill on hover ou gradient outline text hover) sur [où].
Le mot doit d’abord n’être qu’un contour, puis, tant que le pointeur le survole, un remplissage plein doit glisser en douceur de gauche à droite et se retirer quand le pointeur s’en va.
Garde le mot en contour lisible avant le remplissage et affiche le même effet au focus clavier.

Le texte suit un tracé courbe et avance le long de celui-ci au fil du défilement.

Ajoute un effet « Text Path Scroll » (aussi appelé text path curve scroll animation) sur [où].
Le texte doit reposer sur une ligne courbe et glisser le long de celle-ci au défilement, en avançant vers le bas et en reculant vers le haut.
Lie le mouvement directement à la position de défilement, sans latence, et garde le texte lisible comme du texte normal pour les lecteurs d’écran.

Un mot est dupliqué en de nombreuses copies empilées qui se décalent au défilement.

Ajoute un effet « Text Repetition » (aussi appelé repeated text scroll) sur [où].
Un mot doit être copié en une pile de copies en contour plus pâles qui se déploient depuis l’arrière au fil du défilement, puis se replient quand on remonte.
Lie le déploiement directement à la position de défilement et masque les copies supplémentaires aux lecteurs d’écran pour que le mot ne soit lu qu’une fois.

Le texte existant sort en animation et est remplacé par un nouveau contenu.

Ajoute un effet « Text Replacement » (aussi appelé text swap) sur [où].
Quand le texte change, les anciens caractères doivent glisser vers le haut et sortir pendant que les nouveaux entrent par le bas, caractère après caractère, en une vague rapide et fluide.
Évite que la zone de texte change brusquement de taille pendant l’échange et fais annoncer seulement le nouveau texte aux lecteurs d’écran.

Les mots d’un paragraphe passent de pâles à pleinement opaques au fil du défilement.

Ajoute un effet « Text Reveal » (aussi appelé scroll text reveal ou word-by-word reveal) sur [où].
Le paragraphe doit commencer pâle, puis chaque mot doit s’éclaircir jusqu’à sa pleine intensité l’un après l’autre au fil du défilement, en suivant la position de défilement.
En remontant, les mots doivent pâlir à nouveau, et tout le paragraphe doit rester accessible aux lecteurs d’écran, quelle que soit son atténuation.

Déplacer le pointeur sur une carte dévoile un texte caché sous un bord de masque ou un projecteur.

Ajoute un effet « Text Reveal Card » (aussi appelé spotlight text reveal) sur [où].
Quand le pointeur se déplace sur la carte, un bord vertical doit le suivre de près et dévoiler un texte caché d’un côté, de façon fluide et directe, sans latence.
Sur les écrans tactiles, où il n’y a pas de pointeur à suivre, laisse un glisser ou un appui révéler le texte caché, et rends ce texte accessible aux lecteurs d’écran.

Le texte est remplacé par des caractères aléatoires qui changent et se résolvent peu à peu en mot final.

Ajoute un effet de survol « Text Scramble » (aussi appelé text decode ou encrypted text) sur [où].
Quand le pointeur passe sur le texte, chaque lettre doit défiler rapidement parmi des caractères aléatoires puis se fixer sur sa vraie lettre, l’une après l’autre, de gauche à droite.
Évite que la largeur du texte saute pendant le brouillage, fais lire le vrai texte aux lecteurs d’écran et affiche le même effet au focus clavier.

Le texte pivote en perspective 3D en suivant la position de la souris.

Ajoute un effet « Text Tilt » (aussi appelé perspective text tilt) sur [où].
Le texte doit s’incliner doucement en 3D vers le pointeur quand il bouge, en le suivant avec fluidité, puis revenir à plat en douceur quand le pointeur s’en va.
Garde une inclinaison discrète pour que le texte reste lisible, et laisse-le à plat sur les écrans tactiles et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les caractères apparaissent un par un comme s’ils étaient tapés, généralement suivis d’un curseur clignotant.

Ajoute un effet machine à écrire (Typewriter) sur [où], aussi appelé typing animation ou typing text.
Les caractères doivent apparaître un par un à un rythme de frappe régulier, avec un curseur juste après le dernier caractère tapé qui clignote quelques fois une fois la saisie terminée.
Joue-le une seule fois plutôt qu’en boucle, laisse les lecteurs d’écran lire tout le texte immédiatement et affiche le texte complet si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Au survol, un soulignement s’étend sous un lien depuis un côté ou depuis le centre.

Ajoute un effet de survol soulignement animé (Underline Draw) sur [où], aussi appelé animated underline ou hover underline animation.
Quand le pointeur survole le lien, un soulignement doit s’étendre en douceur de gauche à droite sous le texte, puis se rétracter quand le pointeur s’en va : rapide et discret.
Évite que le soulignement décale la mise en page autour et affiche le même effet au focus clavier.

Les lettres deviennent progressivement plus grasses ou plus fines (ou changent de largeur ou d’inclinaison) grâce aux axes d’une police variable.

Ajoute un effet de survol « Variable Font Weight Animation » (aussi appelé font weight shift) sur [où].
Tant que le pointeur survole le texte, les lettres doivent s’épaissir l’une après l’autre en une vague fluide de gauche à droite, puis s’affiner à nouveau quand le pointeur s’en va.
Utilise une police variable pour que la graisse change en douceur au lieu de sauter, évite que le titre en s’élargissant pousse le contenu voisin et affiche le même effet au focus clavier.

De grandes lettres servent de fenêtre sur une vidéo en lecture à l’intérieur.

Ajoute un effet « Video Text » (aussi appelé text video mask) sur [où].
De grandes lettres épaisses doivent servir de fenêtre sur une vidéo en lecture, pour que les images en mouvement n’apparaissent qu’à l’intérieur des formes des lettres.
Garde la vidéo muette et en boucle, sans commandes, fournis les mots en vrai texte pour les lecteurs d’écran et affiche une image fixe si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres montent et descendent en séquence, créant une vague qui parcourt le mot.

Ajoute un effet « Wavy Text » (aussi appelé text wave) sur [où].
Les lettres doivent monter et descendre l’une après l’autre pour qu’une vague douce et fluide parcoure le mot en continu.
Fais une boucle sans coupure, fais-le lire comme un seul mot par les lecteurs d’écran et arrête la vague si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un mot de la phrase est remplacé par le mot suivant d’une liste avec un glissement, une rotation ou un fondu.

Ajoute un effet « Word Rotate » (aussi appelé rotating words ou flip words) sur [où].
Un mot de la ligne doit glisser vers le haut et sortir pendant que le mot suivant d’une liste entre par le bas, avec une pause sur chaque mot avant le changement suivant.
Évite que le reste de la ligne saute quand les mots n’ont pas la même largeur, ne fais pas annoncer chaque changement par les lecteurs d’écran et arrête la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une forme organique modifie son contour en continu.

Ajoute une animation en boucle « Blob Morph » (aussi appelée morphing blob ou animated blob) sur [où].
Une forme organique doit changer lentement de contour sans arrêt tout en tournant doucement : fluide et souple, sans angles vifs.
Rends la boucle continue pour que la forme ne saute jamais, et garde-la immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les formes proches fusionnent comme des gouttes liquides grâce à un filtre de flou et de contraste.

Ajoute un « Gooey Effect » (aussi appelé goo effect ou metaballs) sur [où].
Au survol, de petites gouttes doivent se détacher de la forme principale en s’étirant comme un liquide avant de se libérer, puis revenir et fusionner en douceur quand le pointeur s’en va.
Applique le filtre de flou et de contraste uniquement au petit groupe de formes, pas à toute la page, et montre le même effet au focus clavier et au toucher.

Une icône, comme le menu hamburger, se transforme en une autre (X) grâce à des barres qui pivotent et se déplacent.

Ajoute un « Icon Morph » (aussi appelé hamburger to X ou menu icon morph) sur [où].
À chaque appui, les barres du haut et du bas doivent d’abord glisser ensemble vers le milieu puis pivoter pour former un X pendant que la barre centrale disparaît en fondu ; un nouvel appui inverse le tout : rapide et vif.
Fais-en un vrai bouton bascule dont le libellé accessible et l’état déplié changent avec lui, et garde la taille de l’icône fixe pour que rien ne bouge autour.

Un tracé SVG semble se dessiner le long de son chemin grâce à l’animation du décalage des tirets.

Ajoute une animation « Line Drawing » (aussi appelée path drawing ou self-drawing SVG) sur [où].
Chaque trait doit sembler se dessiner tout seul, en douceur, le long de son chemin du début à la fin, et un second trait, comme une coche, suit juste après le premier.
Joue-la une seule fois à l’entrée à l’écran plutôt qu’en boucle, et affiche les lignes entièrement tracées si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un élément parcourt un chemin courbe personnalisé et peut pivoter pour le suivre.

Ajoute une animation « Motion Path » (aussi appelée animate along path) sur [où].
Un petit élément doit parcourir un itinéraire courbe personnalisé à un rythme lent et régulier, en pivotant pour faire face à sa direction de déplacement.
Utilise un itinéraire fermé pour que la boucle se répète sans saut, et fais en sorte que l’itinéraire s’adapte à son conteneur au lieu de garder une taille fixe.

De petits cercles ou icônes tournent autour d’un centre sur des orbites circulaires.

Ajoute des « Orbiting Circles » (aussi appelés orbit animation ou orbiting icons) sur [où].
De petits cercles doivent tourner lentement et régulièrement autour d’un élément central sur des anneaux circulaires, l’anneau extérieur tournant dans l’autre sens et plus lentement.
Garde la boucle continue et les éléments en orbite bien droits, et arrête la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une forme vectorielle se transforme en douceur en une autre.

Ajoute un « Shape Morph » (aussi appelé path morphing ou SVG morph) sur [où].
Une forme doit se transformer en douceur en une autre, par exemple un pentagone qui se resserre en étoile, ses points glissant à leur place à un rythme régulier et posé.
Donne aux deux formes le même nombre de points correspondants pour que la transformation reste nette et sans scintillement, et joue-la une fois par changement d’état plutôt qu’en boucle.

Un filtre SVG déforme du texte ou des formes avec un bruit animé.

Ajoute un effet de survol « SVG Displacement Distortion » (aussi appelé displacement map effect) sur [où].
Pendant le survol, le texte ou la forme doit onduler et trembler comme vu à travers de l’eau en mouvement, avec une apparition douce, puis redevenir net quand le pointeur s’en va.
N’applique le filtre de distorsion que lorsque l’effet est actif pour qu’il ne coûte rien au repos, et montre le même effet au focus clavier.

Une forme de masque balaie la surface ou suit le pointeur pour dévoiler le contenu en dessous.

Ajoute un effet de survol « SVG Mask Reveal » (aussi appelé clip-path reveal ou spotlight mask) sur [où].
Pendant le survol, un masque circulaire doit s’agrandir depuis le centre et dévoiler le contenu en dessous, puis se refermer quand le pointeur s’en va : fluide et assez rapide.
Garde les deux calques exactement à la même taille pour que rien ne bouge, et montre le même dévoilement au focus clavier et au toucher.

Des lignes et des points s’animent entre des lieux sur une carte ou un globe.

Ajoute des « Animated Map Arcs » (aussi appelés globe arcs) sur [où].
Des lignes courbes doivent se dessiner l’une après l’autre entre des lieux sur une carte en points, puis se rétracter vers leur destination pendant qu’un anneau doux y pulse : calme et régulier.
Décale les arcs pour qu’ils ne bougent jamais en même temps, garde la boucle continue et mets-la en pause si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les barres montent d’une hauteur nulle jusqu’à leurs valeurs.

Ajoute une animation « Bar Chart Grow » (aussi appelée animated bar chart ou bar chart entrance) sur [où].
Chaque barre doit monter de la ligne de base jusqu’à sa valeur, l’une après l’autre avec un décalage rapide, en ralentissant en douceur à l’arrivée.
Joue-la une seule fois quand le graphique entre à l’écran, et affiche directement le graphique final si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Des barres horizontales échangent leur rang au fil du temps à mesure que les valeurs changent.

Ajoute un « Bar Chart Race » (aussi appelé racing bar chart) sur [où].
Les barres horizontales doivent grandir et rétrécir à mesure que les valeurs évoluent dans le temps, et glisser en douceur les unes devant les autres à chaque changement de rang, chacune gardant son libellé.
Déplace les barres avec des transformations plutôt qu’en réordonnant le balisage pour que les échanges glissent au lieu de sauter, et donne aux utilisateurs un moyen de le mettre en pause.

Les éléments du graphique passent en douceur des anciennes aux nouvelles valeurs quand les données changent ou qu’on bascule de jeu de données.

Ajoute une « Chart Data Transition » (aussi appelée chart update animation) sur [où].
Quand les données changent, toutes les barres doivent glisser en même temps de leur ancienne valeur à la nouvelle, en douceur et sans hâte, au lieu d’être redessinées depuis zéro.
Fais partir chaque mise à jour des valeurs actuellement affichées pour qu’un second changement rapide ne saute pas, et applique les nouvelles valeurs instantanément si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un anneau ou un camembert se remplit dans le sens horaire jusqu’à son pourcentage.

Ajoute une animation « Donut Chart Fill » (aussi appelée pie chart sweep ou animated donut chart) sur [où].
En partant du haut, chaque segment doit se déployer à tour de rôle dans le sens horaire jusqu’à ce que l’anneau affiche sa part, en ralentissant en douceur à la fin.
Joue-la une seule fois quand le graphique entre à l’écran, et garde les vraies valeurs disponibles en texte pour les lecteurs d’écran.

Un nombre défile d’une valeur de départ jusqu’à une valeur cible quand il devient visible.

Ajoute un compteur animé (Number Ticker) sur [où] : aussi appelé count up ou animated counter.
Quand le nombre entre à l’écran, il doit compter de zéro jusqu’à sa cible, vite au début puis en ralentissant doucement à l’arrivée.
Utilise des chiffres à chasse fixe pour que rien ne tremble autour, compte une seule fois, et donne directement la valeur finale aux lecteurs d’écran et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Chaque chiffre défile verticalement jusqu’à la nouvelle valeur quand un nombre change.

Ajoute une animation de nombres « Odometer » (aussi appelée rolling numbers ou slot-machine digits) sur [où].
Quand la valeur change, chaque chiffre doit rouler verticalement jusqu’à son nouveau chiffre, toujours vers l’avant, avec un léger décalage entre les chiffres et un petit calage à la fin.
Garde tous les chiffres de même largeur pour que le nombre ne bouge pas, et n’expose que la valeur finale aux lecteurs d’écran.

Un fond coloré balaie l’élément depuis un bord avec un léger dépassement élastique.

Ajoute un effet au survol « Background Bounce Sweep » sur [où].
Une nouvelle couleur de fond doit balayer l’élément depuis un bord, dépasser légèrement le bord opposé avec un rebond élastique puis se stabiliser, pendant que la couleur du texte change pour rester lisible ; quand le pointeur sort, elle ressort en glissant en douceur.
Garde le texte au-dessus du remplissage et applique le même effet au focus clavier.

La couleur du fond et celle du texte passent en fondu vers une nouvelle couleur au survol.

Ajoute un effet au survol « Background Fade » (aussi appelé color fade) sur [où].
Les couleurs du fond et du texte doivent passer en fondu vers de nouvelles couleurs tant que le pointeur survole l’élément, puis revenir quand il sort : calme, sans mouvement.
Garde un contraste suffisant entre texte et fond dans les deux états et applique le même effet au focus clavier.

Un fond coloré balaie l’élément depuis un bord au survol.

Ajoute un effet au survol « Background Sweep » (aussi appelé background fill ou slide fill) sur [où].
Une nouvelle couleur de fond doit balayer l’élément du bord gauche vers le bord droit, de façon fluide et rapide, sans rebond, puis se retirer de la même manière quand le pointeur sort, pendant que la couleur du texte change pour rester lisible.
Garde le remplissage découpé dans la forme de l’élément et applique le même effet au focus clavier.

L’élément s’élève puis flotte de haut en bas en continu tant qu’il est survolé.

Ajoute un effet au survol « Bob » (aussi appelé hang) sur [où].
L’élément doit s’élever un peu, puis continuer à flotter doucement de haut en bas tant que le pointeur reste dessus, et redescendre quand il sort : lent et doux.
Ne fais boucler le mouvement que pendant le survol et garde l’élément immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

La couleur de la bordure apparaît ou change en fondu au survol.

Ajoute un effet au survol « Border Fade » sur [où].
La bordure doit passer en fondu d’une teinte discrète à la couleur d’accent tant que le pointeur survole l’élément : subtil, sans mouvement ni changement de taille.
Garde la même épaisseur de bordure dans les deux états pour que rien ne bouge et applique le même effet au focus clavier.

Des anneaux de bordure concentriques s’étendent vers l’extérieur ou se resserrent vers l’intérieur au survol.

Ajoute un effet au survol « Border Ripple » sur [où].
Quand le pointeur entre, quelques anneaux de bordure doivent s’étendre depuis l’élément l’un après l’autre puis s’estomper : rapide et léger, comme une onde.
Joue-le une fois par survol au lieu de le faire boucler et ne laisse pas les anneaux décaler la mise en page autour.

L’élément change d’échelle avec un dépassement élastique au début ou à la fin du survol.

Ajoute un effet au survol « Bounce Scale » (aussi appelé bounce in / out) sur [où].
L’élément doit grossir légèrement avec un dépassement élastique bien visible, en allant brièvement au-delà de sa taille finale avant de se stabiliser, puis rebondir de la même façon quand le pointeur sort.
Évite que la mise en page autour ne bouge et applique le même effet au focus clavier.

Un fond de surbrillance glisse d’une carte à l’autre dans une grille pour suivre celle qui est survolée.

Ajoute un « Card Hover Effect » (aussi appelé sliding highlight card grid) sur [où].
Un fond de surbrillance doux doit apparaître derrière la carte survolée et glisser en douceur vers la carte suivante que vise le pointeur, puis disparaître en fondu quand le pointeur quitte la grille.
Fais en sorte que le focus clavier déplace la surbrillance de la même façon et que les cartes elles-mêmes ne bougent pas.

Une douce lumière radiale suit le pointeur sur la surface de la carte et révèle le fond en dessous.

Ajoute un effet « Card Spotlight » (aussi appelé spotlight hover, pointer glow, mouse-following glow ou radial gradient hover) sur [où].
Une lueur radiale douce et légère doit suivre le pointeur sur la surface de la carte, apparaître en fondu quand il entre et s’estomper quand il sort.
Garde la lueur derrière le contenu de la carte pour que le texte reste lisible et, sur les appareils tactiles, laisse simplement la carte sans éclairage.

Un coin de l’élément se replie comme une page qu’on tourne au survol.

Ajoute un effet au survol « Curl » (aussi appelé page curl) sur [où].
Un coin de l’élément doit se replier en douceur comme une page qu’on tourne, en montrant le revers du pli, puis redevenir plat quand le pointeur sort.
Garde le pli petit pour qu’il ne cache pas de contenu important et applique le même effet au focus clavier.

Un calque glisse depuis le côté par lequel le pointeur est entré et repart vers le côté par lequel il sort.

Ajoute un effet « Direction Aware Hover » (aussi appelé direction-aware overlay) sur [où].
Un calque doit glisser depuis le côté par lequel le pointeur est entré et repartir vers le côté par lequel il sort : rapide et fluide.
Détermine le côté à partir de la position du pointeur à l’entrée et à la sortie et, au toucher ou au focus clavier, utilise une direction par défaut.

Les icônes d’une rangée grossissent en douceur à l’approche du pointeur, comme le Dock de macOS.

Ajoute un effet « Dock Magnification » (aussi appelé dock) sur [où].
Les icônes de la rangée doivent grossir en douceur à mesure que le pointeur s’approche, la plus proche étant la plus grande et ses voisines légèrement agrandies, puis toutes reprendre leur taille normale quand le pointeur s’en va.
Fais grossir les icônes vers le haut à partir d’une ligne de base fixe et garde chaque icône utilisable à sa taille normale au toucher et au clavier.

L’élément s’élève de quelques pixels au survol, comme s’il flottait.

Ajoute un effet au survol « Float » (aussi appelé lift ou raise) sur [où].
L’élément doit s’élever un peu et rester surélevé tant que le pointeur est dessus, puis redescendre quand il sort : fluide et doux, sans rebond.
Déplace-le seulement visuellement sans décaler la mise en page autour et applique le même effet au focus clavier.

Les cartes voisines deviennent floues et s’assombrissent tandis que la carte survolée reste nette.

Ajoute un effet « Focus Cards » (aussi appelé blur siblings on hover, hover focus blur ou card hover effect) sur [où].
Tant que le pointeur survole une carte, les autres doivent devenir floues, s’assombrir et rétrécir légèrement tandis que la carte survolée reste nette, le tout avec un fondu doux qui s’inverse quand le pointeur sort.
Applique la même mise en avant au focus clavier et garde toutes les cartes nettes et lisibles quand rien n’est survolé.

Un halo lumineux coloré apparaît autour de l’élément au survol.

Ajoute un effet au survol « Glow » (aussi appelé neon glow) sur [où].
Un halo coloré doux doit apparaître en fondu autour de l’élément tant que le pointeur est dessus, puis s’estomper quand il sort : doux, sans mouvement.
Fais en sorte que le halo n’affecte pas la mise en page et applique le même effet au focus clavier.

L’élément s’agrandit légèrement et en douceur quand le pointeur le survole.

Ajoute un effet au survol « Grow » (aussi appelé scale up) sur [où].
L’élément doit s’agrandir légèrement et en douceur tant que le pointeur est dessus, puis reprendre sa taille quand il sort : rapide et subtil.
Évite que la mise en page autour ne bouge et applique le même effet au focus clavier.

Au survol, le fond plein se vide et ne laisse qu’un bouton à contour.

Ajoute un effet de survol « Hollow » (aussi appelé ghost fill) sur [où].
Le fond plein doit disparaître en fondu pour ne laisser que le contour, et la couleur du libellé doit changer pour rester lisible sur le fond vide : fluide et rapide.
Garde la même épaisseur de bordure dans les deux états pour que l’élément ne change pas de taille, et affiche le même effet au focus clavier.

Une bordure en dégradé s’anime autour de l’élément et s’étend quand le pointeur le survole.

Ajoute un effet « Hover Border Gradient » sur [où].
Un court reflet en dégradé doit reposer sur une partie de la bordure ; tant que le pointeur survole l’élément, il doit faire le tour de la bordure à vitesse régulière pendant que toute la bordure s’illumine d’une lueur douce.
N’anime la bordure qu’au survol et garde-la immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Au survol, une ombre douce apparaît ou s’accentue sous l’élément pour suggérer qu’il s’élève.

Ajoute une ombre au survol (Hover Shadow) sur [où], aussi appelée drop shadow on hover ou elevation on hover.
Une ombre douce sous l’élément doit s’accentuer et s’étaler tant que le pointeur le survole pour qu’il paraisse surélevé, puis s’estomper quand il le quitte, sans que l’élément lui-même bouge.
Garde l’ombre assez discrète pour fonctionner en thème clair comme en thème sombre, et affiche le même effet au focus clavier.

Une couche translucide teinte l’élément pour indiquer que le pointeur le survole.

Ajoute un « Hover State Layer » (aussi appelé hover state, state layer ou hover overlay) sur [où].
Une couche translucide et légère dans la couleur du contenu doit apparaître rapidement en fondu sur l’élément tant que le pointeur le survole, puis disparaître quand il le quitte.
Garde-la légère pour préserver le contraste, et utilise le même principe de couche pour les états focus et pressé.

Au survol, une icône tombe hors du champ et revient par le haut.

Ajoute un effet de survol « Icon Drop » sur [où].
L’icône dans l’élément doit tomber vers le bas jusqu’à disparaître, puis revenir à sa place par le haut : rapide, avec un atterrissage en douceur.
Joue-le une fois à chaque entrée du pointeur plutôt qu’en boucle, et ne change ni le libellé ni la taille du bouton.

Une icône s’échappe du bouton en flottant et s’efface pendant qu’une nouvelle arrive.

Ajoute un effet de survol « Icon Float Away » sur [où].
L’icône actuelle doit s’élever en flottant et s’effacer pendant qu’une nouvelle icône monte d’en bas pour prendre sa place, en douceur, et l’échange doit s’inverser quand le pointeur sort.
Garde la taille du bouton fixe pendant l’échange, et affiche le même effet au focus clavier.

Une icône à l’intérieur d’un bouton tourne sur elle-même au survol du bouton.

Ajoute un effet de survol « Icon Spin » sur [où].
L’icône dans l’élément doit faire un tour complet en douceur quand le pointeur entre, puis revenir en tournant quand il sort.
Fais tourner uniquement l’icône, pas tout le bouton, et affiche le même effet au focus clavier.

Au survol, le libellé du bouton glisse vers l’extérieur tandis qu’une flèche et un remplissage s’étendent.

Ajoute un effet « Interactive Hover Button » sur [où].
Le petit point à côté du libellé doit s’agrandir jusqu’à remplir le bouton pendant que le libellé glisse sur le côté et s’efface, puis le libellé accompagné d’une flèche glisse par-dessus le nouveau remplissage : fluide et rapide.
Garde la taille du bouton fixe et le libellé lisible du début à la fin, et affiche le même effet au focus clavier.

Au survol, une flèche ou l’élément lui-même glisse de quelques pixels vers l’avant ou vers l’arrière.

Ajoute un effet de survol « Nudge Forward / Backward » (aussi appelé arrow nudge) sur [où].
La flèche doit glisser un peu dans la direction qu’elle indique tant que le pointeur survole l’élément, puis revenir quand il le quitte : rapide et léger.
Ne déplace que la flèche, sans décaler le libellé ni la mise en page, et affiche le même effet au focus clavier.

Au survol, un contour s’écarte de l’élément ou se resserre vers lui.

Ajoute un effet de survol « Outline Expand » sur [où].
Un contour doit partir collé au bord de l’élément et s’en écarter pour laisser un petit espace tout autour, rester ainsi pendant le survol et se refermer quand le pointeur sort : fluide et rapide.
Dessine le contour sans changer la taille de l’élément ni pousser le contenu voisin, et affiche le même effet au focus clavier.

Au survol, une ligne se déploie au-dessus du texte depuis la gauche, le centre ou la droite.

Ajoute un effet de survol « Overline Grow » sur [où].
Une ligne au-dessus du texte doit s’étendre du centre vers les deux côtés tant que le pointeur le survole, puis se rétracter vers le centre quand il sort : rapide et fluide.
Réserve de la place pour la ligne afin que le texte ne bouge pas, et affiche le même effet au focus clavier.

L’élément grossit rapidement puis revient à sa taille avec un petit rebond élastique.

Ajoute un effet de survol « Pop » sur [où].
À chaque entrée du pointeur, l’élément doit gonfler une fois rapidement puis revenir à sa taille normale, comme un petit rebond élastique.
Joue-le une fois par survol au lieu de garder la taille agrandie ou de boucler, et évite que la mise en page autour ne bouge.

L’élément s’enfonce puis revient, comme un bouton physique qu’on presse.

Ajoute un effet de survol « Push » sur [où].
À chaque entrée du pointeur, l’élément doit rétrécir une fois rapidement puis reprendre sa taille normale d’un petit rebond, comme un bouton physique qu’on enfonce.
Joue-le une fois par survol plutôt qu’en boucle, et évite que la mise en page autour ne bouge.

Au survol, un cercle coloré s’agrandit depuis le centre ou se rétracte vers lui pour remplir l’élément.

Ajoute un effet de survol « Radial Fill » (aussi appelé circle expand) sur [où].
Un cercle de la nouvelle couleur doit s’agrandir en douceur depuis le centre jusqu’à remplir l’élément, puis se rétracter vers le centre quand le pointeur sort, pendant que la couleur du libellé change pour rester lisible.
Garde le cercle découpé dans la forme de l’élément et le libellé au-dessus, et affiche le même effet au focus clavier.

Au survol, un rectangle s’agrandit ou se rétracte à l’intérieur de l’élément pour en changer le fond.

Ajoute un effet de survol « Rectangle Fill » sur [où].
La nouvelle couleur de fond doit se refermer depuis les quatre bords à mesure qu’un rectangle intérieur rétrécit vers le centre, puis se rouvrir quand le pointeur sort, pendant que la couleur du libellé change pour rester lisible : fluide et rapide.
Garde le libellé au-dessus du remplissage, et affiche le même effet au focus clavier.

L’élément pivote de quelques degrés au survol.

Ajoute un effet de survol « Rotate » sur [où].
L’élément doit pivoter légèrement dans le sens des aiguilles d’une montre tant que le pointeur le survole, puis revenir quand il sort : fluide et discret.
Évite que la mise en page autour ne bouge, et affiche le même effet au focus clavier.

Les coins de l’élément s’arrondissent en douceur au survol.

Ajoute un effet au survol « Round Corners » sur [où].
Les angles vifs de l’élément doivent s’arrondir en douceur tant que le pointeur est dessus, puis redevenir nets quand il sort : doux et rapide.
Garde la taille de l’élément inchangée et applique le même effet au focus clavier.

Au survol, une bande de lumière diagonale balaie l’élément d’un côté à l’autre.

Ajoute un effet au survol « Shine Sweep » (aussi appelé sheen, shiny button, shine on hover, glint, shimmer ou shimmer button) sur [où].
Une douce bande de lumière diagonale doit balayer l’élément de gauche à droite, puis recommencer après une courte pause tant que le pointeur reste dessus.
Garde la bande rognée à l’intérieur de l’élément, arrête-la quand le pointeur sort et ne la joue pas si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément rétrécit légèrement et en douceur quand le pointeur le survole.

Ajoute un effet au survol « Shrink » (aussi appelé scale down) sur [où].
L’élément doit rétrécir légèrement et en douceur tant que le pointeur est dessus, puis reprendre sa taille quand il sort : rapide et subtil.
Évite que la mise en page autour ne bouge et applique le même effet au focus clavier.

Au survol, le fond s’ouvre ou se ferme comme des volets, depuis le centre ou depuis les bords.

Ajoute un effet au survol « Shutter Fill » (aussi appelé shutter) sur [où].
La nouvelle couleur de fond doit s’ouvrir depuis une ligne verticale au centre vers les deux côtés, comme des volets, puis se refermer vers le centre quand le pointeur sort, tandis que la couleur du texte change pour rester lisible : fluide et rapide.
Garde le remplissage rogné à l’intérieur de l’élément et le texte au-dessus, et applique le même effet au focus clavier.

Au survol, l’élément descend de quelques pixels, comme s’il s’enfonçait dans la page.

Ajoute un effet au survol « Sink » sur [où].
L’élément doit descendre un peu et rester en place tant que le pointeur est dessus, comme s’il s’enfonçait dans la page, puis remonter quand il sort : fluide, sans rebond.
Déplace-le seulement visuellement sans décaler la mise en page autour, et applique le même effet au focus clavier.

L’élément s’incline de biais au survol.

Ajoute un effet au survol « Skew » sur [où].
L’élément doit s’incliner de biais jusqu’à une légère inclinaison tant que le pointeur est dessus, puis se redresser quand il sort : rapide et fluide.
Garde le texte lisible pendant l’inclinaison, évite que la mise en page autour ne bouge et applique le même effet au focus clavier.

Au survol, un petit triangle de bulle apparaît sur un côté de l’élément.

Ajoute un effet au survol « Speech Bubble » (aussi appelé bubble) sur [où].
Une petite pointe triangulaire doit glisser de derrière un côté de l’élément pour lui donner une forme de bulle, puis rentrer quand le pointeur sort : rapide et fluide.
Donne à la pointe la même couleur que l’élément pour qu’ils forment une seule forme, et applique le même effet au focus clavier.

Au survol, un filet intérieur apparaît juste à l’intérieur du bord de l’élément.

Ajoute un effet au survol « Trim » sur [où].
Un filet fin doit apparaître en fondu juste à l’intérieur du bord de l’élément tant que le pointeur est dessus, puis disparaître quand il sort : discret, sans mouvement.
Garde le filet à l’intérieur de l’élément pour que sa taille ne change pas, et applique le même effet au focus clavier.

Une ligne glisse depuis le bord inférieur ou supérieur jusqu’à sa place pour souligner ou surligner l’élément par le haut.

Ajoute un effet au survol « Underline Reveal » (aussi appelé overline reveal ou reveal) sur [où].
Une ligne pleine largeur doit remonter en glissant jusqu’à sa place depuis juste sous le bord inférieur tant que le pointeur est sur l’élément, puis redescendre hors de vue quand il sort : rapide et fluide.
Rogne la ligne au bord pour qu’elle apparaisse en glissant plutôt qu’en fondu ou en s’allongeant, et applique le même effet au focus clavier.

La carte se déplace et change légèrement d’échelle en réponse au mouvement du pointeur sur elle.

Ajoute un effet « Wobble Card » sur [où].
Quand le pointeur se déplace sur la carte, celle-ci doit glisser légèrement vers lui tandis que son contenu glisse légèrement dans l’autre sens avec un petit agrandissement, en suivant en douceur, puis tout revient en place quand le pointeur sort.
Garde le mouvement réduit, et désactive-le sur les appareils tactiles et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’image du produit rétrécit et s’envole en arc de cercle jusqu’à l’icône du panier.

Ajoute une animation « Add to Cart Fly » (aussi appelée fly to cart ou add-to-cart animation) sur [où].
Quand on appuie sur le bouton d’ajout, une petite copie de l’image du produit doit rétrécir en volant selon un arc fluide et rapide jusqu’à l’icône du panier, et le panier doit faire un petit sursaut pendant que son compteur se met à jour.
Joue-la une fois par appui sans déplacer la carte produit d’origine, et supprime le vol si l’utilisateur a activé la réduction des animations (prefers-reduced-motion), tout en mettant quand même le panier à jour.

Quand on coche la case, une coche se dessine trait par trait à l’intérieur.

Ajoute une animation « Checkbox Check Draw » (aussi appelée animated checkbox ou checkmark draw) sur [où].
Quand on coche la case, elle doit se remplir de couleur et la coche doit se dessiner d’un seul trait rapide et fluide ; quand on la décoche, elle s’efface de la même façon.
Garde une vraie case à cocher avec son état coché, utilisable au clavier et avec un anneau de focus visible.

Des morceaux de papier colorés jaillissent puis retombent pour célébrer une réussite.

Ajoute une célébration « Confetti » (aussi appelée confetti burst) sur [où].
De petits morceaux de papier colorés doivent jaillir rapidement du bouton, puis tournoyer et retomber en flottant tout en disparaissant en fondu, en une pluie courte et joyeuse.
Déclenche-la une fois par réussite au lieu de la faire tourner en boucle, évite qu’elle bloque les clics sur la page et supprime-la si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’icône de copie se transforme en coche et le libellé affiche Copié un instant.

Ajoute une animation « Copy-to-Clipboard Feedback » (aussi appelée copied state ou copy icon to checkmark) sur [où].
Quand on appuie sur le bouton de copie, l’icône de copie doit rétrécir rapidement pendant qu’une coche se dessine et que le libellé devient « Copié », puis tout revient en douceur après un court instant.
Garde le bouton à la même taille pendant l’échange pour que rien ne bouge, et annonce l’état copié aux lecteurs d’écran.

Un élément suit le pointeur quand on le fait glisser et peut être limité à une zone ou à un axe.

Ajoute une interaction « Drag » (aussi appelée draggable ou drag constraints) sur [où].
L’élément doit suivre directement le pointeur pendant qu’on le fait glisser, s’arrêter aux bords de sa zone autorisée et revenir à sa position de repos avec un petit rebond quand on le relâche.
Fais-le fonctionner au toucher comme à la souris sans que la page défile en dessous, et propose un moyen de le déplacer au clavier.

Le libellé du placeholder remonte et rétrécit au-dessus du champ quand il a le focus ou est rempli.

Ajoute un label flottant (Floating Label) sur [où], aussi appelé float label ou animated placeholder.
Quand le champ a le focus ou contient une valeur, le libellé placé à l’intérieur doit glisser vers le haut et rétrécir jusqu’au bord supérieur du champ, de façon fluide et rapide, et ne redescendre que quand le champ est vide et sans focus.
Garde un vrai label associé à l’input, et fais en sorte que la hauteur du champ ne change pas pour que le formulaire ne bouge jamais.

Une icône de cœur se remplit de couleur et projette de petites particules ou pulse au clic.

Ajoute une animation « Like / Heart Burst » (aussi appelée heart animation ou favorite toggle) sur [où].
Au like, le cœur doit se remplir de couleur et rebondir avec élasticité pendant qu’un anneau et de petits points jaillissent vers l’extérieur puis s’estompent, le tout rapide et ludique ; en retirant le like, le cœur se vide simplement, sans effet.
Fais-en un vrai bouton bascule avec son état pressé, et ne joue l’éclat qu’à l’activation.

Maintenir un élément enfoncé un instant déclenche des actions supplémentaires ou un remplissage de progression.

Ajoute une interaction d’appui long (Long Press) (aussi appelée press and hold ou touch and hold) sur [où].
Pendant l’appui, l’élément doit s’enfoncer légèrement tandis qu’un remplissage de progression le parcourt à rythme régulier ; une fois plein, il revient avec un petit ressort et ouvre son menu, et relâcher trop tôt annule et réinitialise le remplissage.
Donne aux utilisateurs du clavier et des lecteurs d’écran un autre moyen d’accéder aux mêmes actions, et empêche l’appui de sélectionner du texte ou d’ouvrir le menu contextuel du navigateur.

Un badge de compteur apparaît d’un coup, rebondit ou pulse à l’arrivée d’une nouvelle notification.

Ajoute une animation « Notification Badge Bounce » (aussi appelée badge pop ou ping) sur [où].
À l’arrivée d’une nouvelle notification, le badge de compteur doit surgir de nulle part et se poser avec deux petits rebonds rapides et élastiques, pendant qu’un anneau doux s’en échappe une fois.
Joue-la une fois par nouvelle notification plutôt qu’en boucle, et annonce le nouveau compte aux lecteurs d’écran.

Une icône d’œil passe d’ouverte à barrée quand le mot de passe est affiché ou masqué.

Ajoute un bouton afficher/masquer le mot de passe (Password Reveal Toggle) (aussi appelé show/hide password ou eye icon toggle) sur [où].
Un appui sur l’œil doit effacer rapidement sa barre pendant que les points masqués se fondent en vrais caractères, et un nouvel appui redessine la barre et les masque : fluide et rapide, sans rebond.
Garde la largeur du champ stable pour que le texte ne saute pas, et fais du bouton un vrai bouton dont le libellé indique si le mot de passe est affiché.

Une flèche de pointeur trace un cadre de mise en valeur autour d’un mot quand le texte apparaît au défilement.

Ajoute un effet « Pointer Highlight » sur [où].
Quand le texte apparaît au défilement, un cadre doit se tracer autour du mot clé de gauche à droite pendant qu’une petite flèche de pointeur longe son coin, de façon fluide et régulière, comme si quelqu’un entourait le mot à la main.
Ne le trace qu’à la première apparition, sans décaler le texte, et affiche directement le cadre terminé si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément rétrécit légèrement pendant l’appui et revient avec un ressort au relâchement.

Ajoute un effet « Press (Button Tap Scale) » (aussi appelé tap feedback ou press state) sur [où].
Pendant l’appui, l’élément doit rétrécir légèrement et s’assombrir un peu, puis reprendre sa taille avec un petit rebond au relâchement : rapide et discret.
Affiche le même retour au clavier et au toucher, et empêche la mise en page autour de bouger.

Tirer une liste vers le bas fait apparaître un indicateur de chargement et recharge le contenu au relâchement.

Ajoute une interaction tirer pour actualiser (Pull to Refresh) (aussi appelée swipe to refresh) sur [où].
Quand on tire la liste vers le bas depuis le haut, elle doit suivre le doigt avec un peu de résistance et révéler un indicateur de chargement qui tourne pendant la traction ; au relâchement, il continue de tourner pendant le rechargement, puis la liste remonte en douceur.
Ne la déclenche que lorsque la liste est déjà tout en haut, et propose aussi un bouton d’actualisation classique aux utilisateurs du clavier et des lecteurs d’écran.

Une onde circulaire s’étend et s’estompe depuis le point exact du clic ou du toucher.

Ajoute un effet « Ripple » (aussi appelé material ripple ou ink ripple) sur [où].
À chaque clic ou toucher, une onde circulaire douce doit se propager depuis le point exact de l’appui jusqu’à couvrir l’élément, en s’estompant à mesure qu’elle grandit : rapide et légère.
Rogne l’onde à la forme de l’élément, laisse chaque appui rapide lancer sa propre onde, et fais-la partir du centre pour les appuis au clavier.

Un cercle et une coche se dessinent d’eux-mêmes pour confirmer qu’une action a réussi.

Ajoute une animation « Success Checkmark » (aussi appelée animated success tick) sur [où].
Un cercle doit se dessiner d’un seul trait fluide, puis la coche se trace à l’intérieur et tout le symbole fait un petit rebond doux : calme et assuré.
Joue-la une fois quand l’action réussit, accompagne-la d’un message texte que les lecteurs d’écran peuvent annoncer, et affiche directement le symbole terminé si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Glisser une ligne de liste sur le côté révèle des boutons d’action comme supprimer ou archiver.

Ajoute une interaction « Swipe to Delete » (aussi appelée swipe actions ou swipe to reveal) sur [où].
Quand on fait glisser une ligne sur le côté, elle doit suivre directement le doigt pour découvrir derrière elle des boutons d’action comme archiver et supprimer, s’arrêter une fois qu’ils sont entièrement visibles, et au relâchement glisser en douceur à sa place, sans rebond.
Garde le défilement vertical fonctionnel pendant le glissement horizontal, et rends les mêmes actions accessibles au clavier et aux lecteurs d’écran sans glisser.

Un bouton rond glisse le long d’un rail dont la couleur change entre désactivé et activé.

Ajoute une animation d’interrupteur (Toggle Switch) (aussi appelé switch) sur [où].
À l’activation ou à la désactivation, le bouton rond doit glisser en douceur jusqu’à l’autre bout du rail pendant que la couleur du rail change : rapide et net, sans rebond.
Fais-en un vrai interrupteur accessible (role="switch" avec son état checked) qui fonctionne aussi au clavier.

Le curseur de texte s’agrandit ou rétrécit pour suivre la taille du caractère à côté duquel il se trouve.

Ajoute un effet « Adaptive Caret » (aussi appelé adaptive caret size) sur [où].
Le curseur de texte doit se placer devant le caractère le plus proche du pointeur et s’étirer ou se réduire rapidement à la hauteur de ce caractère, avec un redimensionnement fluide et vif, sans rebond.
Empêche le texte lui-même de bouger, et fais suivre au curseur les déplacements au clavier comme il suit le pointeur.

Un curseur circulaire inverse les couleurs situées dessous grâce à mix-blend-mode difference.

Ajoute un « Blend-Mode Cursor » (aussi appelé difference cursor ou inverting cursor) sur [où].
Remplace le pointeur par un cercle plein placé juste dessous, sans retard, qui inverse les couleurs du texte et des formes qu’il survole.
Limite le mélange à cette zone pour qu’il ne se mêle pas au reste de la page, vérifie qu’il inverse toujours clairement en mode sombre, et garde le curseur normal sur les appareils tactiles.

Une forme ou une étiquette suit le pointeur avec un retard élastique ou adouci.

Ajoute un « Cursor Follower » (aussi appelé following pointer ou smooth cursor) sur [où].
Un petit repère rond doit suivre le pointeur avec un retard doux et amorti, puis glisser jusqu’à s’arrêter exactement là où le pointeur s’immobilise, sans rebondir.
Garde le vrai pointeur visible, ne laisse jamais le repère bloquer les clics, et retire-le sur les appareils tactiles.

Une image d’aperçu suit le pointeur pendant le survol d’un élément d’une liste de texte.

Ajoute un effet « Cursor Image Hover » (aussi appelé hover image follow ou image preview on hover) sur [où].
Quand le pointeur survole un élément d’une liste de texte, une petite image d’aperçu de cet élément doit flotter à côté du pointeur, le suivre avec un léger retard fluide, et glisser vers l’image suivante quand le pointeur passe à un autre élément.
L’aperçu ne doit jamais bloquer les clics sur la liste, et la liste doit rester entièrement utilisable sans lui au toucher et au clavier.

Un cercle de lumière autour du pointeur révèle le contenu pendant que le reste reste sombre.

Ajoute un effet « Cursor Spotlight » (aussi appelé flashlight cursor ou spotlight effect) sur [où].
Un cercle de lumière doux doit suivre le pointeur et révéler le contenu en dessous pendant que le reste de la zone reste assombri.
Sur les appareils tactiles, où il n’y a pas de pointeur à suivre, affiche plutôt le contenu entièrement éclairé.

Une traînée de formes qui s’estompent reste derrière le pointeur lorsqu’il se déplace.

Ajoute un effet « Cursor Trail » (aussi appelé mouse trail) sur [où].
Quand le pointeur bouge, il doit laisser derrière lui une courte traînée de petits points qui rétrécissent et s’estompent vite, pour que la traînée reste courte et suive le trajet en douceur.
Ne dessine la traînée que pendant le mouvement du pointeur, ne la laisse jamais bloquer les clics, et supprime-la sur les écrans tactiles et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

La flèche par défaut est remplacée par un point ou un anneau stylisé qui change au-dessus des éléments interactifs.

Ajoute un curseur personnalisé (Custom Cursor, aussi appelé animated cursor ou cursor replacement) sur [où].
Remplace la flèche par défaut par un petit point qui suit exactement le pointeur et un anneau qui suit avec un léger retard, et fais grossir l’anneau en douceur au-dessus des liens et des boutons.
Garde le curseur normal sur les écrans tactiles et dans les champs de texte, et ne laisse jamais le curseur personnalisé bloquer les clics.

L’élément est attiré vers le pointeur quand il s’approche, puis revient en place quand il s’éloigne.

Ajoute un effet « Magnetic Button » (aussi appelé magnetic target ou magnetic hover) sur [où].
Quand le pointeur s’approche, le bouton doit être un peu attiré vers lui, son libellé bougeant un peu plus, et quand le pointeur s’éloigne, il doit revenir à sa place avec un petit rebond élastique.
Empêche la mise en page autour de bouger, et désactive l’attraction sur les écrans tactiles et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un champ de petits traits pivote pour pointer vers le pointeur, comme de la limaille de fer autour d’un aimant.

Ajoute un effet « Magnetic Filings » sur [où].
Une grille de traits courts doit pivoter immédiatement pour que chacun pointe droit vers le pointeur, comme de la limaille de fer autour d’un aimant, et tous doivent regarder vers le centre en l’absence de pointeur.
Garde-le comme arrière-plan décoratif qui ne bloque jamais les clics, et laisse les traits immobiles si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un panneau de contenu s’agrandit en douceur jusqu’à sa pleine hauteur ou se réduit à zéro quand on bascule son en-tête.

Ajoute un accordéon (Accordion Expand-Collapse, aussi appelé collapse ou disclosure) sur [où].
Quand on appuie sur un en-tête, son panneau doit s’agrandir en douceur jusqu’à la hauteur réelle de son contenu, puis se refermer complètement à l’appui suivant, la flèche de l’en-tête pivotant en même temps : rapide et fluide, sans rebond.
Anime vers la hauteur réelle du contenu plutôt qu’une valeur fixe devinée, fais de l’en-tête un vrai bouton qui indique son état déplié, et rends le tout utilisable au clavier.

Un calque sombre translucide apparaît en fondu derrière une surcouche pour assombrir la page.

Ajoute un « Backdrop Scrim Fade » (aussi appelé overlay fade ou scrim) sur [où].
À l’ouverture de la surcouche, un calque sombre translucide doit apparaître doucement en fondu sur la page derrière, un peu plus lentement que la surcouche elle-même, puis disparaître à la fermeture.
Garde le scrim sombre en thème clair comme en thème sombre, et empêche la page derrière de défiler ou de recevoir des clics tant qu’il est affiché.

Un panneau glisse depuis le bord inférieur, souvent déplaçable et aimanté à certaines hauteurs.

Ajoute un « Bottom Sheet Slide-Up » (aussi appelé bottom drawer ou sheet) sur [où].
Le panneau doit monter depuis le bord inférieur pendant que la page derrière s’assombrit, en ralentissant doucement jusqu’à sa place, sans rebond.
Joue-le une fois à chaque ouverture, fais-le redescendre à la fermeture, et garde le focus clavier dans le panneau tant qu’il est ouvert.

Les diapositives restent en place et se fondent l’une dans l’autre au lieu de glisser.

Ajoute un « Carousel Crossfade » (aussi appelé fade slideshow ou carousel fade) sur [où].
Les diapositives doivent rester en place et se fondre lentement l’une dans l’autre, l’ancienne disparaissant pendant que la suivante apparaît en même temps, puis rester affichées quelques secondes avant le changement suivant.
Reviens à la première diapositive sans coupure, mets en pause au survol ou au focus, et ne fais pas défiler automatiquement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les diapositives défilent horizontalement dans une fenêtre visible et s’aimantent une à une en place.

Ajoute un carrousel (Carousel Slide, aussi appelé slider ou swipe carousel) sur [où].
Chaque étape doit faire glisser la rangée latéralement pour que la diapositive suivante s’aimante au centre, fluide et en ralentissant, avec les voisines qui dépassent sur les bords et les points de position qui suivent.
Avance d’une diapositive à la fois, prends en charge le balayage tactile ainsi que les boutons et les flèches du clavier, et donne des libellés aux contrôles pour les lecteurs d’écran.

Une carte s’agrandit jusqu’à devenir une vue de détail complète, en gardant un seul conteneur visible qui change de forme et révèle un nouveau contenu.

Ajoute une transition « Container Transform » (aussi appelée card expand to detail ou expandable card) sur [où].
À l’ouverture de la carte, le même conteneur doit s’agrandir en douceur jusqu’à la vue de détail complète, son ancien contenu disparaissant vite et le nouveau apparaissant en fondu une fois l’agrandissement presque terminé ; la fermeture joue l’inverse.
Garde un seul conteneur continu plutôt qu’un fondu entre deux boîtes séparées, et place le focus dans la vue de détail à l’ouverture.

Quand on fait glisser un élément, les autres s’écartent et se replacent dans le nouvel ordre.

Ajoute une « Drag-to-Reorder List » (aussi appelée sortable list) sur [où].
L’élément déplacé doit suivre directement le pointeur et se soulever légèrement, pendant que les autres s’écartent en douceur ; au relâchement, il doit se caler rapidement dans l’emplacement le plus proche.
Prends en charge le tactile comme la souris, et propose un moyen de déplacer les éléments au clavier, avec la nouvelle position annoncée aux lecteurs d’écran.

Un panneau latéral glisse depuis le bord gauche, droit ou supérieur, en poussant ou en recouvrant le contenu.

Ajoute un « Drawer Slide » (aussi appelé off-canvas ou side sheet) sur [où].
Le panneau doit glisser depuis le bord latéral par-dessus le contenu pendant que la page derrière s’assombrit, vite et en ralentissant en douceur, puis ressortir de la même façon à la fermeture.
Garde le focus clavier dans le tiroir ouvert, ferme-le avec Échap ou un clic sur la zone assombrie, et rends le focus au bouton qui l’a ouvert.

Après un changement de mise en page, les éléments glissent en douceur vers leurs nouvelles positions et tailles.

Ajoute une « FLIP Layout Animation » (aussi appelée layout animation ou First-Last-Invert-Play) sur [où].
Quand la mise en page change, chaque élément doit glisser de son ancienne position vers la nouvelle au lieu de sauter, vite au début puis en se posant en douceur.
Anime uniquement avec des transforms pour que la page ne recalcule pas sa mise en page à chaque image, et passe directement à la nouvelle mise en page si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les éléments apparaissent en fondu et en glissant quand on les ajoute, et s’animent en sortant quand on les retire, pendant que les voisins comblent l’espace.

Ajoute une animation « List Item Enter/Exit » (aussi appelée animated list) sur [où].
Un nouvel élément doit d’abord ouvrir sa place, puis apparaître en fondu en glissant ; un élément retiré doit d’abord disparaître en fondu, puis se replier pour que ses voisins comblent l’espace en douceur.
Garde un élément retiré en place jusqu’à la fin de sa sortie, pour que la liste ne saute jamais quand on ajoute ou retire des éléments.

Une ligne de contenu défile latéralement en boucle infinie, sans coupure.

Ajoute un texte défilant (Marquee) sur [où] : une bande qui défile horizontalement à l’infini, aussi appelée ticker.
Le contenu doit défiler de droite à gauche à une vitesse lente et régulière, en boucle continue sans saut visible.
Mets-le en pause au survol et arrête le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Quand on applique un filtre ou un tri, les tuiles de la grille se réorganisent, disparaissent en fondu ou glissent vers de nouveaux emplacements.

Ajoute un effet « Masonry / Grid Shuffle » (aussi appelé filterable grid animation) sur [où].
Quand un filtre est appliqué, les tuiles qui ne correspondent plus doivent rétrécir et disparaître en fondu sur place, pendant que les autres glissent en douceur vers leurs nouveaux emplacements ; retirer le filtre joue l’inverse.
Empêche la page autour de sauter pendant que la hauteur de la grille change, et fais des contrôles de filtre de vrais boutons qui indiquent le filtre sélectionné.

Une boîte de dialogue apparaît en fondu en grandissant légèrement depuis son centre, au-dessus d’une page assombrie.

Ajoute une animation « Modal Scale-Fade In » (aussi appelée dialog open animation ou zoom-fade dialog) sur [où].
La boîte de dialogue doit apparaître en fondu en grandissant légèrement depuis son centre pendant que la page derrière s’assombrit : rapide et discret, sans rebond.
Joue-la une fois à chaque ouverture, place le focus dans la boîte et garde-le dedans, et utilise un simple fondu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un menu flottant apparaît en fondu et s’agrandit depuis l’endroit où se trouve son déclencheur.

Ajoute une animation « Popover / Dropdown Open » (aussi appelée menu pop ou dropdown scale-fade) sur [où].
Le menu doit apparaître en fondu en grandissant légèrement depuis le coin proche de son déclencheur, rapide et net, puis disparaître un peu plus vite à la fermeture.
Garde-le ancré au déclencheur, ferme-le avec Échap ou un clic à l’extérieur, et expose l’état ouvert sur le déclencheur pour les lecteurs d’écran.

Un élément semble se déplacer et se redimensionner vers un élément correspondant à un nouvel endroit, comme s’il n’en formait qu’un.

Ajoute une « Shared Layout Animation » (aussi appelée shared element dans la page) sur [où].
Quand la sélection change, l’élément doit sembler se déplacer et se redimensionner en douceur de son ancienne place vers la nouvelle, en s’y posant délicatement, pour être perçu comme un seul objet et non deux.
N’affiche qu’une seule copie à tout moment et empêche la mise en page autour de sauter pendant le mouvement.

Un soulignement ou une pastille glisse de l’ancien onglet vers l’onglet nouvellement sélectionné.

Ajoute un « Tab Indicator Slide » (aussi appelé sliding underline ou active tab indicator) sur [où].
Quand un nouvel onglet est sélectionné, le soulignement doit glisser de l’ancien onglet vers le nouveau, rapide et en décélérant doucement, et s’étirer à la largeur du nouvel onglet si elle diffère.
Conserve une sémantique d’onglets correcte avec navigation aux flèches du clavier, et déplace l’indicateur sans glissement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un bref message glisse ou apparaît en fondu au bord de l’écran, reste un moment puis s’en va ; les toasts empilés se décalent pour faire de la place.

Ajoute un « Toast Slide-In » (aussi appelé snackbar ou toast notification) sur [où].
Chaque message doit monter depuis le bord de l’écran en apparaissant en fondu, avec une décélération douce ; quand un nouveau toast arrive, ceux déjà affichés doivent se décaler en douceur pour lui faire de la place.
Annonce le message aux lecteurs d’écran sans voler le focus, laisse-le affiché assez longtemps pour être lu et mets en pause la fermeture automatique au survol ou au focus.

Une petite étiquette apparaît en fondu et se glisse à côté d’un élément après un court délai de survol.

Ajoute un « Tooltip Fade » (aussi appelé tooltip reveal) sur [où].
Après un court délai de survol, l’étiquette doit apparaître en fondu en se glissant légèrement à côté de l’élément, puis disparaître vite et sans délai quand le pointeur s’en va.
Affiche-le aussi au focus clavier, permets de le fermer avec Échap et relie-le à l’élément pour que les lecteurs d’écran le lisent.

La nouvelle vue se révèle dans un cercle qui s’agrandit depuis le point du clic.

Ajoute une transition « Circular Reveal » (aussi appelée clip-path circle expand ou theme toggle reveal) sur [où].
La nouvelle vue doit apparaître dans un cercle qui grandit depuis la commande pressée jusqu’à couvrir toute la zone : fluide et régulier, avec une accélération et une décélération douces.
Fais partir le cercle exactement de l’endroit où la commande a été pressée, et bascule instantanément sans cercle si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’ancienne page disparaît en fondu pendant que la nouvelle apparaît en fondu au même endroit.

Ajoute un fondu enchaîné entre les pages (« Crossfade Page Transition », aussi appelé cross-dissolve ou fade transition) sur [où].
À la navigation, l’ancienne page doit disparaître en fondu pendant que la nouvelle apparaît en même temps au même endroit : doux et assez rapide.
Garde les deux pages au même emplacement pour que rien ne bouge pendant le fondu, et place le focus sur le titre principal de la nouvelle page après le changement.

Des panneaux pleins balaient l’écran pour couvrir l’ancienne page, puis se retirent pour révéler la nouvelle.

Ajoute une transition de page « Curtain / Panel Wipe » (aussi appelée page wipe ou staggered panels) sur [où].
Des panneaux pleins doivent balayer l’écran l’un après l’autre pour couvrir l’ancienne page, la page doit changer pendant qu’elle est entièrement couverte, puis les panneaux doivent continuer hors de vue pour révéler la nouvelle : franc et fluide.
N’affiche jamais la nouvelle page avant que les panneaux aient couvert l’ancienne, et utilise un simple fondu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Le contenu sortant disparaît complètement en fondu, puis le contenu entrant apparaît en fondu avec un léger agrandissement.

Ajoute une transition de page « Fade Through » (aussi appelée fade-through transition ou out-in route transition) sur [où].
Le contenu sortant doit d’abord disparaître en fondu, vite et complètement, puis le contenu entrant doit apparaître en fondu en s’agrandissant légèrement jusqu’à sa place.
Ne laisse jamais les deux se chevaucher, et empêche la mise en page du contenu entrant de bouger pendant qu’il s’agrandit.

Un calque d’introduction plein écran avec un logo ou un compteur glisse ou disparaît en fondu pour révéler le site.

Ajoute un « Preloader Curtain Lift » (aussi appelé splash screen ou intro loader) sur [où].
Un calque d’introduction plein écran doit rester en place pendant qu’une barre de chargement se remplit, puis glisser vers le haut et disparaître en douceur pour révéler le site, qui se pose délicatement en dessous.
Ne le joue qu’au premier chargement, ne retiens jamais la page plus longtemps que le chargement réel, et saute-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les contenus sortant et entrant se déplacent ensemble le long de l’axe X, Y ou Z avec des fondus pour montrer leur relation spatiale.

Ajoute une transition de page « Shared Axis » (aussi appelée shared axis X/Y/Z) sur [où].
En avançant, l’ancien contenu doit glisser un peu d’un côté et disparaître vite en fondu pendant que le nouveau arrive de l’autre côté et apparaît juste après ; en revenant, la direction s’inverse.
Garde un déplacement court pour qu’il ne fasse que suggérer la direction, et adapte l’axe à la navigation : latéral pour les pages sœurs, vertical pour les étapes, profondeur pour l’exploration.

Un élément correspondant, comme une miniature, se transforme en position et en taille d’une page à l’autre.

Ajoute une « Shared Element Transition » (aussi appelée hero transition ou view-transition-name morph) sur [où].
En passant à la page suivante, l’élément correspondant, comme une miniature, doit se déplacer et grandir en douceur jusqu’à sa place sur la nouvelle page pendant que le reste du contenu passe en fondu enchaîné, puis rétrécir au retour.
Donne aux éléments correspondants des deux pages une même identité partagée pour qu’ils s’associent correctement, et rabats-toi sur un simple fondu enchaîné quand le navigateur ne peut pas les transformer.

La nouvelle page glisse d’un côté pendant que l’ancienne sort, la direction suivant la profondeur de navigation.

Ajoute une « Slide Page Transition » (aussi appelée push / pop ou directional slide) sur [où].
En avançant, la nouvelle page doit entrer en poussant depuis le côté pendant que l’ancienne sort de l’autre ; en revenant, les deux doivent aller dans le sens inverse : fluide, avec une accélération et une décélération douces.
Lie la direction à la profondeur de navigation, y compris le bouton Retour du navigateur, et empêche la page de défiler latéralement pendant le glissement.

L’ancienne page s’agrandit ou se réduit en disparaissant en fondu pendant que la nouvelle se met à l’échelle jusqu’à sa place.

Ajoute une « Zoom Page Transition » (aussi appelée scale transition ou zoom in / out) sur [où].
En entrant dans le détail, l’ancienne page doit s’agrandir légèrement et disparaître en fondu pendant que la nouvelle grandit depuis une taille un peu plus petite jusqu’à sa place ; au retour, elle doit dézoomer dans l’autre sens : fluide et rapide.
Garde une mise à l’échelle subtile pour que le contenu reste lisible du début à la fin, et utilise un simple fondu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Des barres verticales grandissent et rétrécissent en décalé, comme un égaliseur audio.

Ajoute une animation de chargement « Bar Loader (Equalizer) » (aussi appelée bars loader ou audio bars) sur [où].
Quelques barres verticales doivent s’étirer et se contracter en décalé comme un égaliseur audio, à un rythme vif mais régulier.
Garde une boucle sans coupure, donne-lui un libellé d’état pour les lecteurs d’écran et arrête le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une minuscule version floue de l’image occupe sa place et devient nette quand l’image complète se charge.

Ajoute un effet de chargement d’image « Blur-Up Placeholder » (aussi appelé LQIP ou blur placeholder) sur [où].
Une minuscule version très floue de l’image doit occuper son espace immédiatement, puis, une fois l’image complète chargée, devenir nette en douceur et assez rapidement.
Réserve la taille exacte de l’image pour que rien ne bouge à son arrivée, et rogne les bords flous pour qu’ils ne débordent pas du cadre.

Une rangée de points rebondit, s’estompe ou change d’échelle à tour de rôle.

Ajoute des « Bouncing Dots » (aussi appelés dots loader ou three-dot loader) sur [où].
Les points doivent sauter et retomber l’un après l’autre sur un rythme léger et élastique, avec une courte pause avant que la séquence recommence.
Garde une boucle sans coupure, donne-lui un libellé d’état pour les lecteurs d’écran et arrête le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un bouton remplace son libellé par un petit spinner, ou en ajoute un, pendant qu’une action s’exécute.

Ajoute un « Button Loading State » (aussi appelé spinner button ou loading button) sur [où].
À l’appui, le bouton doit s’enfoncer légèrement, faire disparaître son libellé en fondu et afficher un petit spinner à sa place pendant l’action, puis ramener le libellé une fois terminé.
Garde la largeur du bouton fixe pendant le chargement, bloque les clics répétés et annonce l’état occupé aux lecteurs d’écran.

Un anneau ou un arc tourne en continu pour indiquer qu’un chargement est en cours.

Ajoute un « Circular Spinner » (aussi appelé spinner ou throbber) sur [où].
Un arc doit tourner régulièrement autour d’un anneau pâle en s’allongeant et en se raccourcissant, de façon fluide et continue.
Garde une rotation sans coupure, donne-lui un libellé de chargement pour les lecteurs d’écran et ralentis-le ou arrête-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une barre se remplit de gauche à droite en proportion de l’avancement de la tâche.

Ajoute une barre de progression (Determinate Progress Bar) sur [où], aussi appelée progress bar fill ou progress indicator.
La barre doit se remplir de gauche à droite au rythme de la progression réelle, avec des transitions douces entre les mises à jour, et afficher le pourcentage à côté.
Utilise la sémantique de barre de progression avec les valeurs actuelle, minimale et maximale pour que les lecteurs d’écran puissent la lire, et ne laisse jamais le remplissage reculer.

Un segment de barre parcourt la piste en boucle lorsque la durée est inconnue.

Ajoute une barre de progression indéterminée (Indeterminate Linear Progress) sur [où], aussi appelée indeterminate progress bar.
Un court segment doit parcourir la piste d’un bout à l’autre encore et encore, rapide et fluide, tant que la durée de la tâche est inconnue.
Fais entrer et sortir entièrement le segment de la piste pour que la boucle n’ait aucune coupure visible, et signale-la comme barre de progression occupée pour les lecteurs d’écran.

Une liste d’étapes se met en évidence ou se coche une à une à mesure qu’une longue tâche avance.

Ajoute un « Multi-Step Loader » (aussi appelé step loader ou checklist loader) sur [où].
Les étapes doivent s’allumer une à une de haut en bas, et chacune doit recevoir une petite coche qui apparaît avec un léger rebond une fois terminée, à un rythme calme et lisible.
Fais avancer les étapes selon la progression réelle de la tâche plutôt qu’avec un minuteur fixe, et annonce chaque étape terminée aux lecteurs d’écran.

Un arc s’étend autour d’un anneau pour indiquer le pourcentage accompli.

Ajoute un « Progress Ring » (aussi appelé circular progress ou radial progress) sur [où].
En partant du haut, un arc doit s’étendre dans le sens des aiguilles d’une montre autour de l’anneau pour montrer le pourcentage accompli, en ralentissant doucement à l’arrivée, pendant que le nombre au centre augmente en même temps.
Garde l’arc et le nombre synchronisés, et expose la valeur avec la sémantique de barre de progression pour les lecteurs d’écran.

Des blocs gris de remplacement s’estompent et réapparaissent doucement pour signaler un chargement.

Ajoute un « Pulse Placeholder » (aussi appelé skeleton pulse) sur [où].
Des blocs gris ayant la forme du contenu à venir doivent s’éclaircir puis revenir lentement, tous ensemble, sur un rythme doux et régulier.
Calque les blocs sur la mise en page réelle pour que rien ne saute à l’arrivée du contenu, et laisse-les immobiles si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un reflet lumineux balaie des formes grises de remplacement.

Ajoute un « Skeleton Shimmer » (aussi appelé skeleton wave ou shimmer effect) sur [où].
Une bande de lumière douce doit balayer les formes grises de gauche à droite et marquer une courte pause avant le passage suivant : fluide et sans hâte.
Calque les formes sur la mise en page réelle pour que rien ne saute au chargement du contenu, et affiche des blocs statiques si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une fine barre en haut de la page avance lentement pendant la navigation et se termine au chargement.

Ajoute une « Top Loading Bar » (aussi appelée page progress bar) sur [où].
Une fine barre le long du bord supérieur doit d’abord filer vers l’avant, puis avancer de plus en plus lentement pendant le chargement de la page ; une fois le chargement fini, elle doit foncer jusqu’au bout et disparaître en fondu.
Ne la laisse jamais atteindre la fin avant que le chargement soit vraiment terminé, et évite qu’elle masque ou décale le contenu de la page.

Trois points dans une bulle pulsent ou s’élèvent tour à tour pour montrer que quelqu’un ou une IA est en train d’écrire.

Ajoute un « Typing Indicator » (aussi appelé typing dots) sur [où].
Les points dans une petite bulle de chat doivent s’élever et s’éclaircir l’un après l’autre sur un rythme doux et léger pendant que l’autre personne écrit.
Garde une boucle sans coupure, retire la bulle dès que le message arrive, et donne aux lecteurs d’écran un court texte d’état à la place des points.

Une impulsion lumineuse parcourt une ligne qui relie deux éléments.

Ajoute un effet « Animated Beam » (aussi appelé connecting beam) sur [où].
Une courte impulsion lumineuse doit parcourir la ligne qui relie deux éléments, en avançant régulièrement d’un bout à l’autre puis en recommençant : fluide et calme.
Garde la ligne de liaison toujours visible, et fige l’impulsion si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les couleurs d’un fond en dégradé se décalent, glissent ou tournent lentement.

Ajoute un fond en dégradé animé (Animated Gradient) sur [où], aussi appelé gradient animation ou moving gradient.
Les couleurs du dégradé doivent glisser lentement sur la zone en une dérive douce et continue, sans saut visible quand la boucle redémarre.
Garde le texte au-dessus lisible sur toutes les couleurs, et arrête le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une grille de lignes ou de carrés dont les cellules apparaissent, s’estompent ou scintillent.

Ajoute un fond « Animated Grid Pattern » (aussi appelé flickering grid ou grid background) sur [où].
Une grille de lignes pâles doit rester fixe pendant que quelques cellules éparses apparaissent et s’estompent lentement à des moments différents : discret et subtil, jamais toutes en même temps.
Garde-le derrière le contenu sans intercepter les clics, et arrête le scintillement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

De douces bandes de couleur floues dérivent comme une aurore derrière le contenu.

Ajoute un « Aurora Background » (aussi appelé northern lights gradient) sur [où].
De douces bandes de couleur floues doivent dériver et onduler lentement derrière le contenu, en se superposant et en se fondant comme des aurores boréales : très lent et onirique.
Garde le texte au-dessus lisible, évite de recalculer le flou des bandes à chaque image pour rester fluide, et arrête la dérive si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

De fines lignes lumineuses parcourent des tracés et éclatent parfois en touchant une surface.

Ajoute un effet « Background Beams » (aussi appelé light beams ou background lines) sur [où].
Des tracés courbes et pâles doivent rester en arrière-plan pendant que de courtes traînées lumineuses les parcourent l’une après l’autre, à un rythme calme et régulier.
Décale les faisceaux pour qu’ils ne bougent jamais en même temps, garde-les derrière le contenu et arrête-les si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une grille inclinée de tuiles s’allume en couleur au passage du pointeur.

Ajoute un effet « Background Boxes » (aussi appelé tile hover background) sur [où].
Remplis la zone d’une grille inclinée de tuiles ; chaque tuile survolée par le pointeur doit s’allumer instantanément puis s’éteindre lentement, en laissant une courte traînée.
Garde les tuiles derrière le contenu pour qu’elles ne bloquent pas les clics dessus et, sur les écrans tactiles, allume plutôt la tuile touchée.

Un reflet lumineux parcourt la bordure d’une carte.

Ajoute un effet « Border Beam » (aussi appelé shine border ou moving border) sur [où].
Un court reflet lumineux doit parcourir la bordure de la carte à un rythme régulier et posé, en boucle sans saut visible.
L’effet ne doit modifier ni le contenu ni la taille de la carte ; arrête le reflet si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une grille de points pulse ou s’illumine par vagues.

Ajoute un arrière-plan « Dot Pattern Glow » (aussi appelé dotted glow background ou dot grid) sur [où].
Une fine grille de points doit rester immobile pendant qu’une douce bande lumineuse la balaie lentement et allume les points sur son passage : calme et discret.
Garde les points assez pâles pour que le contenu au-dessus reste lisible et arrête la lueur si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une ligne lumineuse s’élargit et projette un cône de lumière sur le titre en dessous.

Ajoute un « Lamp Effect » (aussi appelé lamp glow) sur [où].
Quand la section entre à l’écran, une fine ligne lumineuse doit s’élargir depuis le centre et projeter un doux cône de lumière sur le titre en dessous, qui apparaît en fondu en montant à sa place : lent et fluide.
Joue-le une seule fois et, si l’utilisateur a activé la réduction des animations (prefers-reduced-motion), affiche directement le titre éclairé.

De doux faisceaux de lumière oscillent sur l’arrière-plan.

Ajoute un arrière-plan « Light Rays » (aussi appelé god rays ou light shafts) sur [où].
Plusieurs faisceaux doux et semi-transparents doivent s’ouvrir en éventail depuis le haut et osciller doucement d’un côté à l’autre, en s’éclaircissant et s’assombrissant un peu : lent et atmosphérique.
Garde les faisceaux derrière le contenu et assez pâles pour ne pas gêner la lecture, et arrête-les si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Plusieurs points de couleur se fondent et dérivent en douceur, formant un fond organique aux multiples teintes.

Ajoute un arrière-plan « Mesh Gradient » (aussi appelé animated mesh gradient) sur [où].
Plusieurs taches de couleur douces doivent se fondre les unes dans les autres et dériver lentement dans la zone, pour que le fond change sans cesse de façon organique : très lent et fluide.
Garde le contenu au-dessus lisible sur chaque mélange et arrête la dérive si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Des traînées diagonales à queue lumineuse traversent une carte ou une section.

Ajoute un effet « Meteors » (aussi appelé meteor shower ou shooting stars) sur [où].
Quelques petites traînées à queue évanescente doivent traverser la zone en diagonale à des moments aléatoires, chacune rapide puis disparue.
Garde-les peu nombreuses pour que ça reste un accent, coupe-les aux bords de la zone et arrête-les si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une fine texture mouchetée recouvre la page et scintille parfois comme du grain de film.

Ajoute une surcouche « Noise / Grain Texture » (aussi appelée film grain ou noise background) sur [où].
Une texture mouchetée fine et pâle doit recouvrir la surface et scintiller par petits sauts comme du grain de film : discrète, jamais assez forte pour brouiller le contenu.
Laisse les clics traverser la surcouche, génère la texture une seule fois au lieu de le faire à chaque image et garde-la immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

De nombreux petits points dérivent, se relient ou réagissent au pointeur sur l’arrière-plan.

Ajoute un arrière-plan « Particles » (aussi appelé floating particles ou particle field) sur [où].
De petits points de tailles différentes doivent flotter et dériver lentement sur des trajectoires douces et vagabondes, chacun à son propre rythme : calme et aérien.
Garde un nombre de points modéré pour que ça reste léger sur les appareils plus lents, mets-le en pause hors de l’écran et arrête-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).