CSSView TransitionsAnimationsBrowser APIs

View Transitions API: Native Page Animations Without Libraries

The View Transitions API enables smooth, animated transitions between page states and navigations — natively in the browser, with just a few lines of CSS and JavaScript.

U

UIXplor Team

February 25, 2026 · 7 min read

✦

01What View Transitions Does

The View Transitions API captures screenshots of the current and next state, then animates between them. The default animation is a cross-fade:

js
document.startViewTransition(() => {
  // Any DOM update here gets animated
  document.body.innerHTML = newPageContent;
});

Browser support: Chrome 111+, Safari 18+, Firefox behind flag.

02Customising the Transition Animation

The API exposes pseudo-elements for CSS animation:

css
/* Default cross-fade — customize it */
::view-transition-old(root) {
  animation: 200ms ease-out both fade-out;
}
::view-transition-new(root) {
  animation: 300ms ease-in both slide-in;
}

@keyframes fade-out { to { opacity: 0; } }
@keyframes slide-in { from { opacity: 0; transform: translateY(20px); } }

03Named Transitions for Specific Elements

Give elements a `view-transition-name` to animate them independently:

css
.hero-image { view-transition-name: hero; }
.product-title { view-transition-name: product-title; }
js
// When navigating to product page:
await document.startViewTransition(() => navigateToProduct(id));
// The hero image morphs smoothly from list to detail view

This creates the 'shared element transition' effect from native mobile apps.

Related UI Components

◈

Collections

All UI component collections

✨

Animations

CSS & Tailwind animation library

Back to Blog