Page Transition

La nouvelle vue se révèle dans un cercle qui s’agrandit depuis le point du clic.

Ajoute une transition « Circular Reveal » (aussi appelée clip-path circle expand ou theme toggle reveal) sur [où].
La nouvelle vue doit apparaître dans un cercle qui grandit depuis la commande pressée jusqu’à couvrir toute la zone : fluide et régulier, avec une accélération et une décélération douces.
Fais partir le cercle exactement de l’endroit où la commande a été pressée, et bascule instantanément sans cercle si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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.

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

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.

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.

La nouvelle page glisse d’un côté pendant que l’ancienne sort, la direction suivant la profondeur de navigation.

Ajoute une « Slide Page Transition » (aussi appelée push / pop ou directional slide) sur [où].
En avançant, la nouvelle page doit entrer en poussant depuis le côté pendant que l’ancienne sort de l’autre ; en revenant, les deux doivent aller dans le sens inverse : fluide, avec une accélération et une décélération douces.
Lie la direction à la profondeur de navigation, y compris le bouton Retour du navigateur, et empêche la page de défiler latéralement pendant le glissement.

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