CSS View Transitions

/* Mark element for shared transitions */
.hero-image {
  view-transition-name: hero-image;
}

/* Only animate if motion is OK */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(hero-image) {
    animation: 400ms ease-in-out slide-out;
  }
  ::view-transition-new(hero-image) {
    animation: 400ms ease-in-out slide-in;
  }
  @keyframes slide-out { to { transform: translateX(-100%); opacity: 0; } }
  @keyframes slide-in { from { transform: translateX(100%); opacity: 0; } }
}

/* JavaScript: trigger transition */
document.startViewTransition(() => {
  // DOM update here — e.g. router navigation
  updateContent();
});

/* Browser support: Chrome 111+, Safari 18+, Firefox (behind flag) */