Page fade transition

/* Opt in to cross-document view transitions */
@view-transition {
  navigation: auto;
}

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

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

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

You are a senior frontend engineer adding page transitions to a multi-page site.

Goal: Add a smooth fade transition between page navigations using the CSS View Transitions API.

Technical constraints:
- Use @view-transition { navigation: auto } to opt in to cross-document transitions.
- Customize ::view-transition-old(root) and ::view-transition-new(root) pseudo-elements.
- Use short durations (200–400ms) — page transitions should feel snappy, not cinematic.
- Include prefers-reduced-motion to disable or shorten animations.
- This works for multi-page apps (MPA) — no JavaScript framework needed.

Edge cases:
- Safari support landed in 2024 — test across browsers.
- The old and new page snapshots are composited images — interactive elements are frozen during transition.
- Fallback: if view transitions aren't supported, navigation works normally with no fade.