Curtain / Panel Wipe

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

Au survol, le fond s’ouvre ou se ferme comme des volets, depuis le centre ou depuis les bords.

Ajoute un effet au survol « Shutter Fill » (aussi appelé shutter) sur [où].
La nouvelle couleur de fond doit s’ouvrir depuis une ligne verticale au centre vers les deux côtés, comme des volets, puis se refermer vers le centre quand le pointeur sort, tandis que la couleur du texte change pour rester lisible : fluide et rapide.
Garde le remplissage rogné à l’intérieur de l’élément et le texte au-dessus, et applique le même effet au focus clavier.

Un clip-path ou un masque s’agrandit depuis un bord ou un point et découvre peu à peu l’image ou le texte.

Ajoute un effet d’entrée « Clip Reveal » (aussi appelé mask reveal, wipe reveal ou image reveal) sur [où].
Un bord de découpe doit balayer de gauche à droite pour découvrir progressivement le contenu, qui reste immobile : fluide, avec un début et une fin en douceur.
Réserve l’espace de l’élément dès le départ pour que rien ne se décale, et affiche-le entièrement découvert si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une image se découvre à mesure qu’un cache se rétracte ou que le bord d’un masque s’étend.

Ajoute un « Image Reveal Wipe » (aussi appelé mask reveal ou clip-path reveal) sur [où].
Quand l’image entre à l’écran au défilement, un cache doit s’effacer depuis un côté et la dévoiler en douceur au rythme du défilement, pour qu’elle soit entièrement visible bien avant de quitter l’écran.
Réserve l’espace de l’image pour que la mise en page ne saute pas, et affiche l’image entièrement dévoilée 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.

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.