Entry 05

Cross-document view transitions

Use it on any multi-page site to crossfade between pages. It replaces a client-side router or a page-transition script.

Follow the link. The two pages crossfade, the header holds still, and the readout says yes. In Firefox the page changes at once.

Code CSS · 1 line

@view-transition { navigation: auto; }

Why it works, the rules and the credits 1 reason · 2 rules · support · credits

On a same-origin navigation the browser snapshots the old and new page and crossfades them. Parts that do not change, such as the header, appear to stay in place.

Both pages must include the rule.
The default crossfade adds no movement and needs no reduced-motion guard. If you add slides, put the rule inside @media (prefers-reduced-motion: no-preference).

Firefox navigates as normal.

Borrowed from: Jen Simmons and James Craig, Two lines of Cross-Document View Transitions code you can use on every website today, 2025-05-21 · Bramus Van Damme, Cross-document view transitions for multi-page applications