View Transitions API

ELI5 — The Vibe Check

The View Transitions API lets you animate between page navigations with smooth, native transitions — no framework needed. Click a link and the old page cross-fades into the new one. A thumbnail expands into a full image. A list item morphs into a detail page. These are the kind of transitions that used to require a SPA framework and 500 lines of JavaScript. Now it's a few lines of CSS.

Real Talk

The View Transitions API provides a native browser mechanism for creating animated transitions between DOM states or page navigations. For same-document transitions, it captures before/after snapshots and animates between them. For cross-document (MPA) transitions, it works with @view-transition CSS and view-transition-name properties. It enables morph transitions, cross-fades, and shared element animations without JavaScript animation libraries.

Show Me The Code

/* Enable cross-document transitions */
@view-transition {
  navigation: auto;
}

/* Name elements for shared transitions */
.card-image {
  view-transition-name: hero-image;
}

/* Customize the transition */
::view-transition-old(hero-image) {
  animation: fade-out 0.3s ease;
}

::view-transition-new(hero-image) {
  animation: fade-in 0.3s ease;
}

When You'll Hear This

"Use the View Transitions API for page navigation — it feels like a native app." / "Assign view-transition-name to elements you want to morph between pages."