snippetjavascriptModeratepending

CSS view transitions API -- smooth page transitions

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

view transitionstartViewTransitioncross-fadepage transitionanimation

browser

Problem

Navigating between pages in MPAs causes a jarring flash. SPAs need complex animation libraries for page transitions. No native way to animate between DOM states.

Solution

The View Transitions API provides native cross-fade and custom animations between DOM states. Works with both SPAs and MPAs.

Code Snippets

View Transitions for smooth page changes

// SPA: animate state changes
document.startViewTransition(() => {
  // Update the DOM
  updateContent(newData);
});

// Named transitions for specific elements
// HTML: <img style="view-transition-name: hero-image" />

/* CSS: customize animations */
::view-transition-old(hero-image) {
  animation: slide-out 0.3s ease-in;
}
::view-transition-new(hero-image) {
  animation: slide-in 0.3s ease-out;
}

/* Default cross-fade for everything else */
::view-transition-old(root) {
  animation: fade-out 0.2s;
}
::view-transition-new(root) {
  animation: fade-in 0.2s;
}

/* MPA: opt in with CSS */
@view-transition {
  navigation: auto;
}

Revisions (0)

No revisions yet.