Playground · 11 demos
CSS Page Transitions Playground
Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.
Or browse the full CSS Page Transitions collection for the gallery view with code panels.
01 CSS + JS
Fade Transition
An elegant crossfade between content panels. Best for dashboards, CMS screens, and tab navigation where the surrounding context stays stable.
Open
02 CSS + JS
Slide Transition
A directional slide that communicates sequence. The spatial metaphor helps users follow linear flows like onboarding and multi-step wizards.
Open
03 CSS + JS
Scale / Zoom Transition
A card expands to reveal more detail. The zoom-in metaphor intuitively signals drilling deeper into content without a full page load.
Open
04 CSS + JS
Clip-Path Wipe
A dramatic clip-path reveal that wipes the new page into view. High-impact and memorable — best reserved for creative portfolios and brand sites.
Open
05 CSS + JS
Blur Morph Transition
Content softly de-focuses then re-focuses as the new view emerges. Calm and considered — ideal for data-heavy SaaS dashboards and admin apps.
Open
06 CSS + JS
Book Page Turn
A real 3D page curl using CSS preserve-3d and rotateY — the right leaf lifts off and turns to reveal the next spread. An antiquarian book floating in a dark ambient scene.
Open
07 CSS + JS
Ink Bleed
A Canvas ink drop radiates organically from the centre with seismic roughness — like sumi ink spreading on wet paper, covering, then receding. Set in a Japanese ceramics studio.
Open
08 CSS + JS
Triangle Shatter
Delaunay-like triangular fragments fill the viewport then explode outward with random velocities and rotations, revealing the next page. Applied to an aerospace deep-tech site.
Open
09 CSS + JS
Vertical Split Curtain
Two full-height panels slide closed like theatre curtains, swap the page, then split apart with a different easing — a gold-seamed theatrical reveal. A Parisian haute couture house.
Open
10 CSS + JS
ASCII Matrix Rain
A Canvas rain of katakana and ASCII floods the screen column by column, glowing at the leading edge, then retracts in a second wave. CRT scanlines throughout. A cybersecurity platform.
Open
11 CSS + JS
Paint Brush Stroke
A wide organic bezier brushstroke sweeps across the viewport — overlapping waves with ink texture and rough-edge noise. The accent colour shifts per page. A contemporary art gallery.
Open