CSS view transitions for page navigation animation

Need smooth transitions between page views in single-page apps or multi-page apps without complex JavaScript.

CSS View Transitions API:

/* Basic cross-fade (automatic for SPA navigation) */
@keyframes fade-in {
  from { opacity: 0; }
}
@keyframes fade-out {
  to { opacity: 0; }
}

::view-transition-old(root) {
  animation: 300ms ease fade-out;
}
::view-transition-new(root) {
  animation: 300ms ease fade-in;
}

/* Named transitions for specific elements */
.hero-image {
  view-transition-name: hero;
}

::view-transition-old(hero) {
  animation: 300ms ease-out both fade-out;
}
::view-transition-new(hero) {
  animation: 300ms ease-in both fade-in;
}

/* Slide transition */
::view-transition-old(page) {
  animation: 300ms ease both slide-out;
}
::view-transition-new(page) {
  animation: 300ms ease both slide-in;
}

@keyframes slide-out {
  to { transform: translateX(-100%); }
}
@keyframes slide-in {
  from { transform: translateX(100%); }
}

// Trigger in JavaScript (SPA)
if (document.startViewTransition) {
  document.startViewTransition(() => {
    updateDOM(); // Your navigation/state change
  });
} else {
  updateDOM(); // Fallback: no transition
}

// MPA: Add meta tag
// <meta name="view-transition" content="same-origin">

View Transitions provide native, performant page transition animations without JavaScript animation libraries or complex state management.

Web applications needing smooth page transitions