View Transitions API

The View Transitions API lets a page describe a transition between two DOM states declaratively. The browser takes a snapshot of the current document, applies the DOM update, takes a second snapshot, and animates between them — without any imperative tweening code. Specific elements can be marked with a `view-transition-name` so they’re morphed individually, enabling effects like a hero image flying from a card thumbnail to its detail view.

The single-page version (`document.startViewTransition`) is supported across every Chromium browser as of 2024. The cross-document version, which animates between full page loads, is rolling out alongside Speculation Rules.

View Transitions are best used to reinforce hierarchy: where did this thing come from, where is it going. Treat them as the connective tissue of the interface, not as standalone effects.