Blur In

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 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).

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 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.

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).