Page transition
The choreographed exit and entrance when you navigate: the old page leaves, the new one arrives, no hard flash in between.
See it
What it is
A page transition is the choreography around navigation: the outgoing route plays an exit, the incoming route plays an enter, and the two are timed so the swap reads as one continuous move. Classic flavors are the crossfade, the directional slide, and the curtain wipe (a colored panel sweeps across, covers the swap, sweeps away).
Reach for it when navigation feels like a hard cut: a white flash, a scroll jump, content popping in at random. On the web you get it from the View Transitions API (native, cross-document with a couple of CSS lines), or from a framework layer like Next.js route animations, Astro's view transitions, or the old-guard SPA library Barba.js.
Gotcha: a transition is dead time you are adding to every click. Keep exits under about 200ms and let the enter do the expressive work, since users forgive a slow arrival but hate waiting to leave. Also test the back button, scroll restoration, and 'prefers-reduced-motion' early, because those are where page transitions usually break.
Ask AI for it
Add page transitions to this site's route navigation. On leaving a route, fade the content to 0 opacity with a 12px upward translate over 180ms (ease-in); on entering, fade from 0 with a 12px downward offset over 320ms (ease-out), starting after the exit completes. Use the View Transitions API where supported and fall back to CSS classes toggled by the router elsewhere. Keep the header and nav persistent (do not animate them), preserve scroll position on back/forward navigation, and disable all of it under prefers-reduced-motion: reduce with an instant swap.