Fade Through

The old page fades out as the new page fades in over the same area.

Add a "Crossfade Page Transition" (also called a cross-dissolve or fade transition) to [where].
On navigation, the old page should fade out while the new page fades in over the same area at the same time: soft and fairly quick.
Keep both pages in the same spot so nothing shifts during the fade, and move focus to the new page's main heading after the change.

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

The old page scales up or down and fades while the new page scales into place.

Add a "Zoom Page Transition" (also called a scale transition or zoom in / out) to [where].
Drilling in, the old page should scale up slightly and fade out while the new page grows from slightly smaller into place; going back, it should zoom out the opposite way: smooth and quick.
Keep the scaling subtle so the content stays readable throughout, and use a plain fade 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.

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.

A matching element, such as a thumbnail, morphs in position and size from one page to the next.

Add a "Shared Element Transition" (also called a hero transition or view-transition-name morph) to [where].
When moving to the next page, the matching element, such as a thumbnail, should smoothly move and grow into its place on the new page while the rest of the content crossfades, and shrink back when returning.
Give the matching elements on both pages one shared identity so they pair up correctly, and fall back to a plain crossfade where the browser can't morph them.