Crossfade Page Transition (fondu enchaîné)

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

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

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.

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

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