11 CSS Page Transitions

A page transition is the motion that carries a user from one view to the next — instead of the new content snapping in instantly, it fades, slides, zooms, wipes, or morphs into place. It gives the interface a sense of continuity, so the user understands where they came from and where they are now. These eleven demos range from the everyday patterns (crossfade, directional slide, scale/zoom, clip-path wipe, blur morph) to expressive set-pieces — a 3D book page turn, an organic ink bleed, a triangle shatter, a theatrical split curtain, an ASCII matrix rain, and a painted brushstroke.

Each demo here keeps every view in the DOM at once and toggles a single class to move between them. CSS does the actual motion via a transition on opacity, transform, clip-path or filter; a few lines of JavaScript just add and remove the active class on the right element when the user navigates. There is no router and no library — copy the HTML, CSS and JS and it works as a standalone file.

They map to different mental models. A fade (crossfade) keeps context stable — best for dashboards and tab navigation where the user has not really 'gone' anywhere. A slide implies a sequence — it suits onboarding flows and wizards because the directional motion signals forward and back. A zoom implies depth — a card expanding into a detail view reads as 'drilling deeper' into the same content, ideal for e-commerce and galleries.

The native View Transitions API is excellent for real multi-document navigation and is worth using where it is supported. These demos deliberately use plain CSS transitions and a little JavaScript instead, because that approach works in every browser today, runs inside a single page or component, and is easy to drop into an existing app without changing how routing works. The motion principles are identical — only the mechanism differs.

Respect prefers-reduced-motion: when a user has asked for reduced motion, collapse the transition to an instant change (or a very short fade) rather than a large slide or zoom. Keep the transition duration short — roughly 300 to 600ms — so navigation never feels slow. And make sure the incoming view receives focus and is announced, so keyboard and screen-reader users are not left behind by a purely visual change.

Yes. All eleven patterns are MIT licensed and free for personal and commercial projects. Each demo is a complete, self-contained file — copy the HTML, CSS and JavaScript, swap in your own content and colours, and ship it. No attribution required, no signup, no dependencies.