View Transitions API

The View Transitions API lets you animate between different states of the DOM (or between page navigations in MPAs). The browser takes a screenshot of the old state, swaps to the new state, then plays a CSS-defined transition between them. This enables native-feeling page transitions without JavaScript animation libraries. In discussions: 'add a view transition' means wrap state changes in document.startViewTransition().

Assigning view-transition-name: card-1 to an element tells the browser to match it across states and animate it independently. If the element moves position on the new page, the browser creates a smooth interpolation of its movement, opacity, and size — called a shared element transition. This is common in UI patterns where a list item expands into a detail page.

document.startViewTransition(callback) is the entry point. The browser: (1) captures a screenshot of the current DOM, (2) runs your callback to update the DOM, (3) captures the new DOM, then (4) animates between them. Everything inside the callback is the 'new state.' In implementation discussions: 'wrap in startViewTransition' means enable the API for that specific UI update.

Cross-document view transitions (in Chrome 126+) work for multi-page apps (MPA) where the browser navigates to a new HTML document. You opt in with <meta name='view-transition' content='same-origin'>. No JavaScript needed for basic transitions. This means server-rendered sites can have smooth transitions. In architecture discussions: 'cross-document' refers to transitions between actual page navigations, not SPA state updates.

View Transitions use CSS pseudo-elements: ::view-transition-old(name) (screenshot of old state) and ::view-transition-new(name) (the new state). By targeting these with animation declarations, you fully customise the transition. Default is a cross-fade; you can override with slide, scale, or any CSS animation. In discussions: 'customise the view transition' means write CSS for these pseudo-elements.