View transition
A browser-native transition between two states of a page, where the browser animates the difference automatically.
View Transitions is a web platform API that animates state changes for free. You call `document.startViewTransition(() => updateDOM())`, and the browser captures the before and after, then crossfades or animates between them. Pair it with CSS `view-transition-name` to designate elements that should morph from one view to the other (this is how shared element transitions work on the web). View Transitions ship in Chrome and Edge for same-document changes, and now extend to cross-document navigation as well.
Also called
When to use
- Adding smooth transitions to SPA navigation without a motion library
- Animating list-to-detail transitions with view-transition-name
- Cross-page transitions on MPA sites with cross-document view transitions
- Animated state changes (theme toggle, filter changes)
When not to use
- Browsers without support (provide an instant-update fallback)
- Constant or per-frame animations (View Transitions is for state changes)
- Cases where the transition fights the user's intent
Related
Source
W3C CSS View Transitions Module Level 1 and Level 2. `document.startViewTransition()` shipped in Chrome 111 (March 2023) and Safari 18.2 (December 2024). Cross-document transitions shipped in Chrome 126. Firefox is tracking the spec.