Moving between two pages without the flash

For ten years the same sentence sold heavy architectures: “a classic site flashes when you change page, a web application does not”. It was true. Every navigation tore everything down and built it back up, and the eye saw the white in between. To avoid it, you replaced the browser’s own navigation with JavaScript that intercepted clicks, fetched the content and swapped part of the page. Hundreds of kilobytes, a history stack to reimplement, and a back button that always ends up wrong somewhere.

The browser now does it on its own.

@view-transition {
  navigation: auto;
}

Two lines in the stylesheet, on both pages, same origin. The browser takes a picture of the old page and one of the new, and cross-fades them. The flash is gone, navigation is still the browser’s own, and not one byte of JavaScript is added.

Going beyond the fade

The default cross-fade is enough most of the time. When an element exists on both sides, you can name it, and the browser moves it instead of fading it.

.logo { view-transition-name: logo; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
}

One name, once, per page: two elements carrying the same name on the same page cancel the transition outright. The typical case is a list where each article thumbnail gets a name; only the one that was clicked may carry it, which on a static site is settled by setting the name from the element’s own attribute rather than on a shared class.

One thing the browser does not do for you, and it is the commonest mistake: switching the effect off for those who asked for that.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none;
  }
}

A two-hundred-millisecond fade bothers nobody. A sideways slide applied to a whole page bothers a great many people, and the system setting exists for them.

Where it can be used

Chrome and Edge since version 126, in May 2024. Safari since version 18.2, in December 2024; WebKit headlined its announcement on the two lines of code you can use on every website today. Firefox has shipped transitions within a single page but not yet, in a stable release, transitions from one page to another. The current table is on Can I Use.

The degradation here is the best possible kind, and that is the decisive argument: a browser that does not know @view-transition ignores the rule and navigates as it always has. There is nothing to plan for, nothing to test twice, no fallback script. The page does not lose a feature, it loses a fade.

What it changes for a site built out of pages

Navigation comfort was the last serious technical argument for putting a content site behind a JavaScript-driven architecture. It has just fallen, for two lines of CSS.

The genuine uses of those architectures remain, and they are real: a dashboard, an editor, a form with complex state. A magazine, a presentation site, a catalogue, a documentation site are not among them and never were. They went there so as not to flash. To judge for yourself, the titles in our catalogue already navigate with these transitions.