Fade Transition
An elegant crossfade between content panels. Best for dashboards, CMS screens, and tab navigation where the surrounding context stays stable.
Published
11 CSS Page Transitions
A page transition is the motion that carries a user from one view to the next. These 11 demos are complete, interactive transition patterns — from simple fades and slides to a 3D page turn, ink bleed, triangle shatter and matrix rain. Click Live Demo on any tile to see it run, or Try it to open the editable playground.
Related22 CSS Transitions16 CSS Fade In Animation Designs12 CSS Infinite Marquee Designs
Slide Transition
A directional slide that communicates sequence. The spatial metaphor helps users follow linear flows like onboarding and multi-step wizards.
Published
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.
Published
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.
Published
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.
Published
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.
Published
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.
Published
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.
Published
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.
Published
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.
Published
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.
Published
FAQ
Frequently asked questions
What is a CSS page transition?
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.
How do you build a page transition without a framework?
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.
What is the difference between the fade, slide, and zoom transitions?
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.
Should page transitions use the View Transitions API instead?
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.
How do I make page transitions accessible?
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.
Are these CSS page transitions free to use?
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.
Related collections
20 CSS Animated Buttons
20 hand-coded CSS animated buttons — neon glow, ripple, 3D press, liquid fill, jelly bounce, shine sweep, animated border, moving gradient CTA, text flip, submit success state, add-to-cart progress, download icon, hamburger-to-close, toggle switch, loading spinner inside button, next/prev arrow nav, and ghost button background reveal. Half pure CSS, half lightweight JS for production interactions.
11 CSS animation-timeline Demos
11 pure CSS animation-timeline demos built on the W3C scroll() and view() spec — reading progress bar, view-timeline fade & reveal, shrinking sticky header, stacking cards, horizontal scroll section, parallax hero, container shadow indicators, reverse-scroll columns, text scrim reveal, cover card to sticky header, and image zoom / clip-path wipe. Zero JS, off the main thread, Core Web Vitals safe. Copy-paste ready.
25 CSS Background Animations
25 hand-coded CSS background animations for SaaS hero sections, developer tool documentation, agency portfolios, gaming and Web3 landing pages, seasonal e-commerce campaigns, and dark-mode dashboards. Covers full-screen gradient shifts, animated mesh gradients, aurora borealis glow, cursor spotlight follow, interactive water ripples, dot grid and diagonal stripe patterns, SVG grain and noise texture overlays, topographic contour lines, layered SVG waves, plasma and lava lamp fluids, bokeh light blur, particle constellation networks, matrix digital rain, synthwave 3D perspective grids, starfield warp speed, CRT scanline overlays, fog and mist drift, morphing organic blobs, floating glassmorphism orbs, halftone dot patterns, starry night skies, floating geometric shapes, rising bubbles, and falling snow. 20 are pure CSS with zero JavaScript; the 5 that need it use vanilla canvas or pointer tracking with no dependencies. Every background animates compositor-only properties so it never blocks the main thread, is scoped under a .bga-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.