View Transitions API: cross-page animations

A 2024 browser feature that feels native

The View Transitions API gives you SPA-like animations between page changes — without an SPA framework. Two parts:

<meta name="view-transition" content="same-origin" />

That meta tag (with content="same-origin") opts the page into cross-document view transitions. Now when the user clicks a link to another page on your site, the browser captures BEFORE and AFTER snapshots and crossfades them.

Customizing with CSS

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

/* Pair specific elements across pages */
.hero { view-transition-name: hero; }

::view-transition-old(hero),
::view-transition-new(hero) {
  /* style the hero's specific transition */
}

Elements with matching view-transition-name are PAIRED across the transition. The browser animates between their positions/sizes (like Hero Animation in iOS).

Browser support

Chrome / Edge ship cross-document transitions. Safari has same-document support, cross-document is shipping. Firefox is behind. Use as a progressive enhancement — works in modern browsers, harmless in old ones.

Respect prefers-reduced-motion

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