Web View Transition API

The View Transition API creates animated transitions between DOM states or page navigations with minimal code. The browser handles snapshotting old/new states and animating between them.

Browser support: Chrome 111+, Edge 111+, Firefox 144+, Safari 18+ (Baseline 2025). Always provide a no-animation fallback.

Quick mental model

When a transition fires, the browser:

1. Captures a static snapshot of the current view
2. Applies your DOM change
3. Captures a live snapshot of the new view
4. Animates old → new using a pseudo-element tree layered above the page

The pseudo-element tree looks like: