CSS View Transitions

Introduction

The View Transitions API lets you animate between DOM states — page navigations, content swaps, or any visual change — with smooth, native transitions. Think mobile app screen transitions for the web.

Previously, this required complex animation libraries and FLIP techniques. View Transitions simplify it to a few lines of code.

The API captures the old state, updates the DOM, then cross-fades. You customize with standard CSS.

Key Concepts

Same-Document Transitions

document.startViewTransition(() => {
  container.innerHTML = newContent;
});

Customizing the Animation

::view-transition-old(root) { animation: fade-out 0.3s ease-out; }
::view-transition-new(root) { animation: fade-in 0.3s ease-in; }

@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

Named Transitions

.hero-image { view-transition-name: hero; }
.page-title { view-transition-name: title; }

::view-transition-old(hero) { animation: scale-down 0.4s ease; }
::view-transition-new(hero) { animation: scale-up 0.4s ease; }

Practical Examples

1. Card to Detail

/* List page */
.card-image { view-transition-name: hero-image; }
/* Detail page */
.detail-hero { view-transition-name: hero-image; }
/* Browser morphs between them */

2. Tab Switching

function switchTab(content) {
  if (!document.startViewTransition) { update(content); return; }
  document.startViewTransition(() => update(content));
}

3. Directional Slide

.going-forward::view-transition-old(content) { animation: slide-out-left 0.3s ease; }
.going-forward::view-transition-new(content) { animation: slide-in-right 0.3s ease; }

Best Practices

• Always feature-detect document.startViewTransition.
• Keep transitions short (200-400ms).
• Use view-transition-name sparingly.
• Ensure names are unique on the page.
• Respect prefers-reduced-motion.

Common Pitfalls

1. Duplicate view-transition-name silently breaks transitions.
2. DOM update must work without transitions.
3. Too-long transitions become annoying.
4. Old/new pseudo-elements are replaced images.

Browser Support

Same-document: Chrome 111+, Edge 111+, Safari 18+. Cross-document: Chrome 126+. Firefox in development. Progressive enhancement.

Related Guides

• CSS Animation & Keyframes — animation primitives for view transitions
• DOM Manipulation Essentials — DOM updates triggering transitions
• JavaScript Performance Tips — transition optimization