Fade Through

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.

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

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’ancienne page s’agrandit ou se réduit en disparaissant en fondu pendant que la nouvelle se met à l’échelle jusqu’à sa place.

Ajoute une « Zoom Page Transition » (aussi appelée scale transition ou zoom in / out) sur [où].
En entrant dans le détail, l’ancienne page doit s’agrandir légèrement et disparaître en fondu pendant que la nouvelle grandit depuis une taille un peu plus petite jusqu’à sa place ; au retour, elle doit dézoomer dans l’autre sens : fluide et rapide.
Garde une mise à l’échelle subtile pour que le contenu reste lisible du début à la fin, 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).

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.

Un élément correspondant, comme une miniature, se transforme en position et en taille d’une page à l’autre.

Ajoute une « Shared Element Transition » (aussi appelée hero transition ou view-transition-name morph) sur [où].
En passant à la page suivante, l’élément correspondant, comme une miniature, doit se déplacer et grandir en douceur jusqu’à sa place sur la nouvelle page pendant que le reste du contenu passe en fondu enchaîné, puis rétrécir au retour.
Donne aux éléments correspondants des deux pages une même identité partagée pour qu’ils s’associent correctement, et rabats-toi sur un simple fondu enchaîné quand le navigateur ne peut pas les transformer.