/* Give each moving element a stable name */
.card { view-transition-name: card-a; }

/* Animate the snapshots (this demo uses fade + slide) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
}
::view-transition-old(card-a) {
  animation: 0.45s ease both fade-out, 0.45s ease both slide-out;
}
::view-transition-new(card-a) {
  animation: 0.45s ease both fade-in, 0.45s ease both slide-in;
}

/* Cross-document transitions (MPA): one line in CSS */
@view-transition {
  navigation: auto;
}

SPA vs cross-document

• SPA (this demo): wrap your DOM update in document.startViewTransition(() => update()). Name the elements that should morph.
• Cross-document (MPA): add @view-transition { navigation: auto; } to your CSS and full page loads animate too, no JavaScript needed.
• Reduced motion: always respect prefers-reduced-motion and skip the transition for users who ask for it.