Be honest about why half the SPAs on the web exist: someone wanted the page not to flash white between navigations. We adopted client-side routers, hydration strategies, and a build pipeline with the mass of a small moon—largely to control the 300 milliseconds between one page and the next.

The View Transitions API ends that trade. The browser snapshots the old page, snapshots the new one, and animates between them—on plain multi-page websites. No router. No framework. For cross-document transitions, not even JavaScript.

Two lines of CSS, entire site animated

Cross-document view transitions are opt-in. Both pages declare themselves willing, and same-origin navigations get a smooth crossfade instead of the hard cut we have accepted since 1993.

/* On every page of the site */
@view-transition {
  navigation: auto;
}

“The white flash between pages was never a law of the web. It was just a default nobody had permission to change.”

Named transitions: the hero morph

The crossfade is the baseline. The magic is view-transition-name. Give an element the same name on both pages—a card thumbnail on the index, the hero image on the article—and the browser morphs one into the other across the navigation. This is the shared-element transition native apps have had for a decade.

/* Index page: the card image */
.card-thumb { view-transition-name: post-hero; }

/* Article page: same name, so it morphs */
.article-hero { view-transition-name: post-hero; }

One rule to remember: a view-transition-name must be unique per page. Two elements sharing a name silently disables the transition.

The safety net is built in

This is progressive enhancement in its purest form. Browsers without support simply navigate the way they always have. Wrap customisations in @supports, respect prefers-reduced-motion, and you are done—no polyfill, no fallback branch, no bundle-size line item.

The navigation smoothness that justified reaching for a SPA is now a CSS feature. Your multi-page site keeps its instant first paint, its working back button, its simple mental model—and gains the polish we used to pay so much complexity for.