CSS View Transitions
The View Transition API lets the browser capture old and new visual states and animate between them. It supports same-document interface changes and cross-document navigation, reducing the amount of custom snapshot and animation plumbing required for polished transitions.
Cross-document transitions
The API also supports transitions between separate documents in a multi-page application when both pages opt into the mechanism and navigation meets the required conditions.
This matters for ordinary server-rendered sites because smooth continuity no longer requires converting the entire product to a client-side router. A cross-document transition should remain enhancement: if the browser does not support it or skips the transition, normal navigation must still work.
CSS View Transitions in images
Selected visual references help connect the article to surviving works, objects, places, documents or practical examples related to this subject.
The basic model
In a same-document transition, document.startViewTransition() receives a callback that updates the DOM. The browser captures the old visual state, performs the update and exposes transition pseudo-elements representing old and new snapshots. CSS can then animate those snapshots. The API coordinates rendering around the change, so developers do not have to manually clone every transitioning element into a temporary overlay before updating the interface.
Named elements and pseudo-elements
By default, the root page view can transition as a whole. view-transition-name can identify individual elements so an image, card or title appears to move continuously between old and new states. CSS pseudo-elements such as ::view-transition-old() and ::view-transition-new() expose the snapshots for animation. Names must be managed carefully, especially in repeated lists, because duplicate active names can prevent a transition from being constructed as intended.
Lifecycle and failure
The ViewTransition object exposes promises and state that let code respond when a transition is ready or finished, and a transition can be skipped. MDN marks the ViewTransition interface as Baseline 2025, meaning it works across current browser versions from October 2025 while older devices may still lack support. Newer portions of the API have their own support timelines. A site should therefore avoid hiding essential state changes behind transition-specific code.
Motion design and accessibility
View transitions can create continuity, but they can also produce excessive motion if every navigation zooms, rotates or sweeps across the screen. The best transitions clarify what changed: a selected card expanding into detail, a persistent title changing position or a small crossfade between pages. prefers-reduced-motion should be respected, and transition durations should not delay interaction unnecessarily. The API is an animation mechanism, not a reason to animate every route.
More context, examples and technical detail
This section moves beyond the introductory account into the material, historical and interpretive details that make CSS View Transitions worth studying in depth.
The browser can animate between visual states
The View Transitions API allows the browser to capture visual snapshots before and after a DOM or page-state change, then animate between them. For same-document transitions, JavaScript wraps a state update so the browser can coordinate old and new renderings. CSS pseudo-elements such as ::view-transition-old() and ::view-transition-new() provide styling hooks for the generated transition layers.
The result can make navigation or state changes feel spatial without manually cloning every element.
Motion still needs semantic restraint
A transition should clarify continuity, not delay the user or turn every interaction into spectacle. Shared-element naming can connect a thumbnail to a larger destination image, but excessive motion becomes distracting and can cause discomfort. Implementations should respect prefers-reduced-motion and ensure that the underlying navigation remains correct if animation is unsupported.
The browser captures old and new states for you
The View Transitions API lets the browser create animated continuity between visual states by capturing snapshots before and after a DOM or page change. In same-document transitions, JavaScript can wrap a state update in document.startViewTransition(); CSS pseudo-elements such as ::view-transition-old() and ::view-transition-new() can then style the captured states. Newer cross-document support extends the idea to navigations between pages in participating browsers. The feature is progressive enhancement: a site still needs correct navigation and state changes without animation. Used carefully, view transitions can clarify spatial relationships; overused, they can slow interaction or conflict with reduced-motion preferences.
In a same-document transition, document.startViewTransition() receives a callback that updates the DOM.
By default, the root page view can transition as a whole.
The ViewTransition object exposes promises and state that let code respond when a transition is ready or finished, and a transition can be skipped.
View transitions can create continuity, but they can also produce excessive motion if every navigation zooms, rotates or sweeps across the screen.
The View Transitions API allows the browser to capture visual snapshots before and after a DOM or page-state change, then animate between them.
A transition should clarify continuity, not delay the user or turn every interaction into spectacle.
Related topics in the Wemaxa Encyclopedia
