What are View Transitions?

The View Transitions API lets the browser animate between two page states — or two separate pages — using a snapshot-based model. The browser captures a bitmap of the current page, navigates to the new page, captures that too, then crossfades (or animates) between them.

For multi-page apps (MPA), all you need is a single CSS rule to opt in. The browser handles the rest with zero JavaScript.

Opting in

/* In your CSS, on every page that should transition */
@view-transition {
  navigation: auto;
}

That's it. Any same-origin navigation between pages that both include this rule will automatically get a default crossfade transition.

How it works

When a navigation is triggered the browser runs this sequence:

1. Captures a bitmap snapshot of the current page (pageswap fires here).

2. Loads the new page off-screen.

3. Captures a snapshot of the new page (pagereveal fires here).

4. Creates a full-screen overlay of pseudo-elements and plays the CSS animations.

5. Removes the overlay when all animations finish, revealing the live new page.

The default animation is a simple crossfade. Page B shows how to customise it with named elements and your own keyframes.