View Transitions API

Definition

The View Transitions API is a browser API that lets developers create smooth, animated transitions between different DOM states — including full page navigations — using a simple JavaScript call and CSS, without hand-rolling complex animation logic. It automatically captures before/after screenshots of the affected elements and cross-fades or animates between them.

Overview

Before the View Transitions API, animating between two visually different UI states — such as a list view expanding into a detail view, or navigating from one page to another — required manually managing DOM snapshots, absolute positioning hacks, or heavyweight animation libraries (like FLIP-technique implementations) to fake a smooth transition. The View Transitions API, shipped first by Chrome for same-document (SPA-style) transitions and later extended to cover full cross-document (multi-page) navigations, standardizes this: calling `document.startViewTransition(callback)` captures a screenshot of the current DOM state, runs the callback to apply the DOM changes, captures the new state, and then automatically cross-fades between the 'old' and 'new' screenshots — all coordinated as a CSS animation the developer can further customize. Developers can opt individual elements into named transitions using the `view-transition-name` CSS property, which tells the browser to treat that specific element as an independent transitioning object — for example, animating a thumbnail image growing smoothly into a full detail image, rather than the whole page just cross-fading as one flat image. Because the transition is expressed as a pseudo-element tree (`::view-transition`, `::view-transition-old()`, `::view-transition-new()`) styleable with normal CSS, developers can customize duration, easing, and even completely replace the default cross-fade with custom keyframe animations. The cross-document version of the API, which works for traditional multi-page navigations (not just SPA route changes), matters particularly for the resurgence of server-rendered, less-JavaScript-heavy sites (as with Islands Architecture and Astro), since it lets such sites get SPA-like polished transitions without adopting a full client-side router or virtual DOM framework. As of the frontend landscape in the mid-2020s, it's supported in Chromium-based browsers with growing support elsewhere, and is commonly used progressively — with `@supports` feature detection — since the API degrades gracefully to an instant, non-animated state change in unsupported browsers.

Specification

• Single JavaScript call (`document.startViewTransition`) triggers an automatic before/after cross-fade
• Supports both same-document (SPA) and cross-document (full page navigation) transitions
• Element-level control via the `view-transition-name` CSS property
• Transition visuals are customizable via CSS pseudo-elements (`::view-transition-old/new`)
• No manual DOM snapshotting or FLIP-technique animation code required
• Degrades gracefully to an instant state change in unsupported browsers
• Works with any DOM change, not tied to a specific framework's router
• Enables SPA-like polished transitions on server-rendered, JS-light multi-page sites

Use Cases

Alternatives

History

The View Transitions API lets developers animate between two states of a page — or between two whole pages — by snapshotting the DOM before and after an update and cross-fading or transforming the difference, all with a small amount of CSS and JavaScript. It solved a long-standing problem: smooth, app-like transitions had been impractical, especially in single-page applications. Developed within the W3C CSS Working Group with input from multiple vendors, same-document (SPA) view transitions first shipped in Chrome 111 in March 2023. The specification then advanced toward Candidate Recommendation and was extended to cross-document (multi-page) transitions, bringing native, high-performance page-transition animations to the web platform.

Frequently Asked Questions

Related in Web