Cross-Document View Transitions Tutorial (2026)
This cross-document view transitions tutorial walks you from the one-line `@view-transition` opt-in to shared-element morphs, direction-aware animations via pageswap/pagereveal, and safe reduced-motion fallbacks — no router required.
Page transitions used to need a router. You'd reach for Next.js or Nuxt transition configs, write enter/leave hooks, hand-roll keyframe choreography, and hope the JavaScript loaded before the user clicked anything. In 2026, page transitions need one line of CSS — and this cross-document view transitions tutorial will take you from that one line to full direction-aware, shared-element page morphs on plain multi-page HTML. The View Transitions API has two halves. Same-document transitions (driven by document.startViewTransition() ) are Baseline since October 2025: Chrome/Edge 111+, Safari 18+, and Firefox 138+. Cross-document transitions — animating actual multi-page navigations — are the newer half: they ship in Chrome 126+, Edge 126+, Opera 112+, and Safari 18.2+, while Firefox has partial support behind a flag in Nightly but nothing stable yet. The opt-in for both halves of your site is identical and trivial, and unsupported browsers simply show a normal navigation. That graceful degradation is the whole story: you can ship this today. What you'll learn How to opt a multi-page site into view transitions with a single at-rule — zero JavaScript required The five-stage pipeline the browser runs between your pages (snapshot → animate) How to morph a shared element (hero image, heading, product card) from page to page with view-transition-name How to replace the default cross-fade with custom keyframes on ::view-transition-old/new How to make back-navigation reverse the animation using pageswap / pagereveal and view-transition types How to ship safely: Firefox behavior, same-origin rules, and prefers-reduced-motion Step 1 — Opt in with the one-line @view-transition { navigation: auto } rule Cross-document view transitions are triggered by the navigation itself,…