Summarize this article with:
Clicking a link shouldn’t feel like teleporting. Yet most websites still jump abruptly between pages with zero visual feedback.
The View Transitions API changes this. Now browsers handle smooth page animations natively, no heavy frameworks required.
These CSS page transitions examples show you exactly how to add crossfades, slides, and element morphing effects to your site.
You’ll learn how to enable transitions with a single CSS rule, animate individual elements between pages, and create custom keyframe effects that work in Chrome, Edge, and other Chromium browsers.
Whether you’re building a multi-page website or a single page application, these techniques bring that polished, app-like feel to your user interface.
What is a CSS Page Transition
A CSS page transition is an animated visual effect that plays when users navigate between pages or states within a website.
Instead of abrupt jumps, the browser creates a smooth crossfade or custom animation between the old and new content.
The View Transitions API handles this natively in modern browsers. Chrome 111 introduced same-document transitions for single page applications. Chrome 126 added cross-document transitions for multi-page websites.
Traditional CSS animation required complex JavaScript workarounds to achieve page-level effects. Now the browser captures a static snapshot of the current view, renders the new content offscreen, then animates between both states automatically.
This creates visual continuity that improves perceived performance and user experience.
CSS Page Transitions Examples To Check Out
Multi-Directional CSS Page Transitions
See the Pen
Marionette – Region CSS Page Transitions by Álvaro (@alvarotrigo)
on CodePen.
David Marland’s Material Design Transition
See the Pen
Material design transition by David Marland (@djmarland)
on CodePen.
Dummy Multi Layer Page Reveal Effect
See the Pen
Dummy Multi Layer Page Reveal Effect by Mehmet Burak Erman (@mburakerman)
on CodePen.
Slide Up & Maybe Everything You Wanted
See the Pen
Vue2 page transitions with GSAP by Rubber Ducky (@iamrubberducky)
on CodePen.
Full CSS Menu Page Transitions
See the Pen
Page Transitions by Álvaro (@alvarotrigo)
on CodePen.
Easy Peasy CSS Page/Slide Transitions by Jamie Coulter
See the Pen
Easy CSS Page/Slide Transitions by Jamie Coulter (@jcoulterdesign)
on CodePen.
Expanding Card Page Transition
See the Pen
Expanding card page transition effect by Rachel Smith (@rachsmith)
on CodePen.
Tiles Page CSS Transition
See the Pen
Tiles Page Transition (CSS) by Álvaro (@alvarotrigo)
on CodePen.
Jeff McCarthy’s Lollipop Transition
See the Pen
Lollipop Transition by Jeff McCarthy (@jeffmccarthyesq)
on CodePen.
Kontext by Hakim El Hattab
See the Pen
Kontext by Hakim El Hattab (@hakimel)
on CodePen.
Layered Splash
See the Pen
Responsive bodymovin modal / page transition by Jonas Sandstedt (@sandstedt)
on CodePen.
Simple Click, Big Impact Page Transition
See the Pen
Simple Page Transition by Álvaro (@alvarotrigo)
on CodePen.
John Heiner’s Page Transition with Loader
See the Pen
Page Transition with Loader by John Heiner (@johnheiner)
on CodePen.
Arsen Zbidniakov’s Page Transition Loader
See the Pen
Page Transition Loader by Arsen Zbidniakov (@ARS)
on CodePen.
The Whole Screen Experience: Section Full-screen CSS Transitions
See the Pen
Fullscreen Layout Page Transitions – Pure JS/CSS by Álvaro (@alvarotrigo)
on CodePen.
Muna’s Article Transition Magic
See the Pen
Article transition page by Muna (@Munamohamed94)
on CodePen.
The Basics: Simple CSS3 Page Transition by Paul DeCotiis
See the Pen
Simple CSS3 Page Transition by Paul DeCotiis (@decotii)
on CodePen.
One Page, One Scroll: CSS Transformations by Nikolay Talanov
See the Pen
One page scroll navigation with css transforms by Nikolay Talanov (@suez)
on CodePen.
Scroll & Reveal: Background CSS Page Transitions
See the Pen
Pagination & layout with clipped background div’s by Álvaro (@alvarotrigo)
on CodePen.
Slide to the Right: Rafael Correa’s Pure CSS Transition
See the Pen
Slide Right Pure CSS Page Transition by rafael correa (@correarafael)
on CodePen.
Rotate & Revel: Svg Path Pagination by Nikolay Talanov
See the Pen
Svg path pagination and rotating page transition by Nikolay Talanov (@suez)
on CodePen.
Back to Basics with a Twist: Basic Page Transition
See the Pen
Basic CSS Page Transition by Álvaro (@alvarotrigo)
on CodePen.
From Thumbnail to the Big Picture: Steve Gardner’s Transition
See the Pen
Thumbnail to fullscreen page transition by Steve Gardner (@ste-vg)
on CodePen.
Hexa-What? Hexagon Circle Magic
See the Pen
Hexagon Circle Panel Transition by Ryan Mulligan (@hexagoncircle)
on CodePen.
Slide, Glide & Transform by Cassandra Rossall
See the Pen
transform: translate by Cassandra Rossall (@cassandraPaige)
on CodePen.
Tiago Barros’ Slick Moves
See the Pen
Css Page Transition by Tiago Barros (@limadeabrros)
on CodePen.
The Mesmerizing World of 3D: Split 3D Carousel
See the Pen
Split 3D Carousel by Paul Noble (@paulnoble)
on CodePen.
Dive into Parallax: Fullscreen Drag-slider
See the Pen
Fullscreen drag-slider with parallax by Nikolay Talanov (@suez)
on CodePen.
Fancy Schmancy Cubic Moves
See the Pen
GSAP Cubic bezier page transition by Álvaro (@alvarotrigo)
on CodePen.
The Classic Wipe Revamped: TOMAZKI’s Take
See the Pen
Page transition CSS3 by TOMAZKI (@Podgro)
on CodePen.
One Page, Many Wonders: Pure CSS Vertical Navigation
See the Pen
Pure CSS One page vertical navigation by Hrtzt (@hrtzt)
on CodePen.
Go Skewed or Go Home
See the Pen
Skewed One Page Scroll by Nikolay Talanov (@suez)
on CodePen.
Slide into the Future
See the Pen
CSS Page Transitions by Álvaro (@alvarotrigo)
on CodePen.
Text, Shapes, Colors: Full Page Scroll Animation
See the Pen
Full Page Scroll Animation Transition by Tyler Chipman (@tyler-chipman)
on CodePen.
Minimal but Mighty: Folio’s Signature Move
See the Pen
folio.transitions by Foliodot (@foliodot)
on CodePen.
The Casual Coolness of CSS UI
See the Pen
Just another CSS UI by Jamie Coulter (@jcoulterdesign)
on CodePen.
How View Transitions API Works
The View Transitions API captures screenshots of DOM elements, then uses CSS keyframes to animate between old and new states.
The browser generates pseudo-elements that represent snapshots of your content before and after the change.
What Does the View Transitions API Capture
The API takes a frozen screenshot of the current page state. It renders new content while the screen remains static, then crossfades between both layers using CSS animations.
What Are Same-Document View Transitions
Same-document transitions animate DOM changes within a single page. Typical for single page applications where content updates without full page reloads.
Triggered by calling document.startViewTransition() before updating the DOM.
What Are Cross-Document View Transitions
Cross-document transitions animate between separate HTML pages during same-origin navigation.
No JavaScript API call needed. Both pages opt in via CSS, and the browser handles everything when users click links.
How to Enable CSS Page Transitions
Enabling view transitions requires minimal code. One CSS at-rule activates the default crossfade effect across your entire site.
How to Opt In Using @view-transition At-Rule
Add this CSS to every page that should participate in transitions:
“ @view-transition { navigation: auto; } `
Both the source and destination pages need this rule. The browser applies a subtle fade animation automatically.
How to Use view-transition-name Property
The view-transition-name property separates specific elements from the default page transition.
` .hero-image { view-transition-name: hero; }
.page-title { view-transition-name: title; } `
Each name must be unique per page. Duplicate names cause the transition to fail and skip entirely.
Elements with matching names across pages animate individually, creating morphing effects where images or headings smoothly transform position, size, and appearance.
How to Use View Transition Pseudo-Elements
The API generates a tree of pseudo-elements that you style with standard CSS animation properties.
What is ::view-transition-old
Represents a static screenshot of the element before the DOM update. Animates out by default with opacity fading to zero.
What is ::view-transition-new
A live representation of the element after the update. Animates in with opacity starting at zero, ending at full visibility.
What is ::view-transition-group
The container that holds both old and new snapshots. Target this to apply shared styles like animation-duration or transform-origin to both states simultaneously.
` ::view-transition-group(hero) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } `
How to Create View Transitions in Single Page Applications
Single page applications update content dynamically without full page reloads. The View Transitions API provides native animation support for these DOM state changes.
How to Use document.startViewTransition()
Wrap your DOM update function inside startViewTransition:
` document.startViewTransition(() => { updateContent(); }); `
The browser captures a snapshot before the callback runs, executes your update, then animates between states.
How to Handle DOM Updates During Transitions
The API returns a ViewTransition object with promise-based lifecycle hooks:
` const transition = document.startViewTransition(updateDOM);
transition.ready.then(() => { // Animation is about to start });
transition.finished.then(() => { // Animation complete }); `
Check for browser support before calling the API. Fallback gracefully when unavailable:
` if (!document.startViewTransition) { updateDOM(); return; } `
Browser Support for View Transitions API
Same-document view transitions work in Chrome 111+, Edge 111+, and Opera 97+.
Cross-document transitions require Chrome 126+ or Edge 126+.
Safari and Firefox lack support as of early 2025. Both browsers display content normally without animations when the API is unavailable.
Test your implementation across browsers. The API degrades gracefully, so users without support still see functional page navigation, just without the smooth transition effects.
Use feature detection rather than browser sniffing:
` @supports (view-transition-name: test) { / View transition styles / } `
Common Problems with CSS Page Transitions
View transitions can cause unexpected behavior. These issues appear frequently during implementation.
How to Fix Frozen UI During Transitions
The page becomes non-interactive while capturing snapshots. Keep transition duration under 500ms to prevent usability issues.
Long animations block user input and hurt Interaction to Next Paint scores.
How to Handle Reduced Motion Preferences
Respect web accessibility by disabling or minimizing transitions for users who prefer reduced motion:
` @media (prefers-reduced-motion: reduce) { ::view-transition-group(), ::view-transition-old(), ::view-transition-new(*) { animation: none !important; } } `
Some users experience motion sickness or vestibular disorders. Always provide this override in production code.
FAQ on CSS Page Transitions
What is the View Transitions API?
The View Transitions API is a browser feature that creates animated
transitions between page states. It captures screenshots of DOM elements, then uses
CSS animations to smoothly crossfade or morph between old and new content.
Which browsers support CSS page transitions?
Chrome 111+, Edge 111+, and Opera 97+ support same-document transitions.
Cross-document transitions require Chrome 126+ or Edge 126+. Safari and Firefox
currently lack support but display content normally without animations.
How do I enable view transitions on my website?
Add @view-transition { navigation: auto; } to your CSS on every page.
Both source and destination pages need this rule. The browser automatically applies
a default crossfade effect between navigations.
What is the difference between same-document and cross-document transitions?
Same-document transitions animate DOM changes within a single page,
typical for single page applications. Cross-document transitions animate between
separate HTML pages during navigation, working across multi-page websites.
How do I animate specific elements during page transitions?
Apply the view-transition-name property to elements you want animated
separately. Elements with matching names across pages morph independently,
transitioning their position, size, and appearance while the rest crossfades.
Can I create custom animations for page transitions?
Yes. Target the ::view-transition-old and
::view-transition-new pseudo-elements with custom keyframe animations.
You control animation-duration, timing-function, and any
transform or opacity effects you want.
Do CSS page transitions affect website performance?
The browser freezes rendering during snapshot capture. Keep transitions under 500ms
to avoid blocking user input. Long animations can hurt Interaction to Next Paint
scores and create usability issues.
How do I handle users who prefer reduced motion?
Use the prefers-reduced-motion media query to disable or minimize
animations. Set animation: none on view transition pseudo-elements for
users with vestibular disorders or motion sensitivity preferences enabled.
Why is my view transition not working?
Common causes include duplicate view-transition-name values on the same
page, missing opt-in CSS on one of the pages, or testing in unsupported browsers.
Check Chrome DevTools for transition debugging tools.
Can I use view transitions with React or Next.js?
Yes. Wrap your state updates or route changes inside
document.startViewTransition(). Next.js and other frameworks work with
the API, though implementation details vary based on your routing approach.
Conclusion
These CSS page transitions examples demonstrate how the View Transitions API brings native animation support to web navigation. No external libraries. No complex JavaScript workarounds.
The implementation is straightforward. One CSS at-rule enables default crossfades. Custom keyframes give you full control over timing, transforms, and opacity changes.
Same-document transitions work for single page applications. Cross-document transitions handle multi-page websites. Both use identical pseudo-element styling.
Browser support in Chrome and Edge covers most users. Safari and Firefox gracefully degrade without breaking functionality.
Remember to respect prefers-reduced-motion` for inclusive design. Keep animation duration short to maintain smooth micro-interactions without hurting performance metrics.
Start with the basic fade effect, then experiment with slide transitions and element morphing as you get comfortable with the API.
