Fade In / Fade Out (fondu)

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

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.

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.

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