Fade Up
Aussi appelée Fade In Up, Reveal on Scroll
L’élément monte légèrement tout en apparaissant en fondu, comme s’il se posait à sa place.
Usages
Titres de section, cartes et images qui apparaissent au défilement
Prompt
Remplacez [où] par la partie de votre page, puis collez le prompt dans votre agent IA. Chaque prompt contient le nom de l’animation : la prochaine fois, il vous suffira de la demander par son nom.
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).Animations similaires
A
Fade In Directional
Aussi appelée Fade In Down, Fade In Left, Fade In Right
L’élément apparaît en fondu en glissant sur une courte distance depuis un côté jusqu’à sa position finale.
Usages
Sections et cartes qui apparaissent au chargement ou au défilement
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).A
Slide In
Aussi appelée Slide In Up, Slide In Down, Slide In Left, Slide In Right
L’élément glisse depuis l’extérieur du bord de son conteneur jusqu’à sa position de repos, sans fondu.
Usages
Tiroirs, panneaux latéraux, bannières
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).Stagger
Aussi appelée Staggered Animation, Cascade
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.
Usages
Listes, grilles, menus de navigation et résultats de recherche
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).A
Fade In / Fade Out (fondu)
Aussi appelée Fade
L’élément passe sur place de totalement transparent à totalement opaque, ou l’inverse quand il disparaît.
Usages
Modales, toasts et contenu de page qui apparaî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).Autres animations : Entrance & Exit
ABCD
L’élément s’allume par de brefs clignotements d’opacité, comme une enseigne néon défectueuse, avant de rester visible.
Usages
Effets de texte néon et rétro
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).A
L’élément fait un tour complet autour de l’axe Y en s’approchant légèrement du spectateur puis en revenant.
Usages
Révélation d’une carte ou d’un badge qui attire l’attention
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).A
Flip In
Aussi appelée Flip In X, Flip In Y
L’élément pivote en 3D autour de son axe horizontal ou vertical, de la tranche jusqu’à faire face au spectateur.
Usages
Révélation de cartes et de tuiles
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).