Crossfade Page Transition

Slides stay in place and dissolve into each other instead of sliding.

Add a "Carousel Crossfade" (also called a fade slideshow or carousel fade) to [where].
Slides should stay in place and slowly dissolve into one another, the old one fading out while the next fades in at the same time, then hold for a few seconds before the next change.
Loop seamlessly back to the first slide, pause on hover or focus, and don't auto-advance for users who prefer reduced motion.

The outgoing content fades out completely, then the incoming content fades in with a slight scale.

Add a "Fade Through" page transition (also called a fade-through transition or out-in route transition) to [where].
The outgoing content should fade out quickly and completely first, then the incoming content should fade in while scaling up slightly into place.
Never let the two overlap, and keep the incoming content's layout from shifting while it scales.

The element goes from fully transparent to fully opaque in place, or the reverse when leaving.

Add a "Fade In / Fade Out" animation (also called fade) to [where].
The element should go from fully transparent to fully visible in place when it appears, and fade back out the same way when it leaves: gentle, with no movement or scaling.
Once it has faded out, make sure it can no longer be clicked or reached with the keyboard, and switch instantly when the user prefers reduced motion (prefers-reduced-motion).

Outgoing and incoming content move together along the X, Y or Z axis with fades to show spatial relation.

Add a "Shared Axis" page transition (also called shared axis X/Y/Z) to [where].
Moving forward, the old content should slide a short way to one side and fade out quickly while the new content slides in from the other side and fades in just after; moving back reverses the direction.
Keep the travel short so it only hints at direction, and match the axis to the navigation: sideways for siblings, vertical for steps, depth for drilling in.

Solid panels sweep across the screen to cover the old page, then retract to reveal the new one.

Add a "Curtain / Panel Wipe" page transition (also called a page wipe or staggered panels) to [where].
Solid panels should sweep in one after another to cover the old page, the page should switch while it is fully covered, and the panels should carry on out of view to reveal the new one: bold and smooth.
Never show the new page before the panels have covered the old one, and use a plain fade instead for users who prefer reduced motion.

A full-screen intro layer with a logo or counter slides or fades away to reveal the site.

Add a "Preloader Curtain Lift" (also called a splash screen or intro loader) to [where].
A full-screen intro layer should hold while a loading bar fills, then slide up and away smoothly to reveal the site, which settles gently into place beneath it.
Play it only on the first load, never hold the page longer than loading actually takes, and skip it for users who prefer reduced motion.