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
- Duplicate view-transition-name silently breaks transitions.
- DOM update must work without transitions.
- Too-long transitions become annoying.
- 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