Blur Out
Aussi appelée Text Blur Out, Slide Out Blurred, Smoky Text Dissipate
L’élément devient de plus en plus flou en disparaissant en fondu ou en glissant hors de vue.
Usages
Transitions douces et sorties de texte
Variantes
- fade only
- slide out
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 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).Animations similaires
A
Puff In / Puff Out
Aussi appelée Puff
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.
Usages
Apparition douce d’objets
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).A
Fade Out Directional
Aussi appelée Fade Out Up, Fade Out Down
L’élément disparaît en fondu en glissant dans une direction.
Usages
Fermeture de notifications et de cartes
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).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).ABCD
Blur In
Aussi appelée Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
L’élément part très flou et devient net, souvent en glissant ou en apparaissant en fondu.
Usages
Apparition de titres et de textes hero
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).Autres animations : Entrance & Exit
A
Bounce In
Aussi appelée Bounce In Down, Bounce In Up
L’élément entre avec un rebond qui dépasse puis se stabilise, en grandissant ou en tombant depuis un bord.
Usages
Badges de notification et modales ludiques
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).A
L’élément rebondit légèrement, puis rétrécit ou s’envole par un bord.
Usages
Fermetures ludiques
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).A
Clip Reveal
Aussi appelée Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
Un clip-path ou un masque s’agrandit depuis un bord ou un point et découvre peu à peu l’image ou le texte.
Usages
Révélation d’images et de titres
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).