View Transitions API: a complete overview

/* Both pages include this file: a click on a link becomes a smooth transition */
@view-transition {
  navigation: auto;
}

/* The whole page: the old one fades out, the new one rises slightly */
::view-transition-old(root) {
  animation: 0.2s ease-in both fade-out;
}
::view-transition-new(root) {
  animation: 0.3s ease-out both rise-in;
}
@keyframes fade-out {
  to { opacity: 0; }
}
@keyframes rise-in {
  from { opacity: 0; translate: 0 1rem; }
}

/* Whoever turned motion off in the system gets an instant change */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

<!-- Catalogue: each thumbnail gets its own name -->
<a href="/catalog/oak-table">
  <img src="/img/oak-table.webp" alt="Oak table" width="320" height="240"
       style="view-transition-name: product-a100">
</a>

<!-- Product page: the photo has the same name —
     the browser flies the thumbnail into the large photo -->
<img src="/img/oak-table.webp" alt="Oak table" width="960" height="720"
     style="view-transition-name: product-a100">

// Each card gets its own name once — the browser tracks every card separately
document.querySelectorAll('.card').forEach((card, i) => {
  card.style.viewTransitionName = `card-${i}`;
});

// Filtering the catalogue without a reload: cards slide to their new places
function applyFilter(category) {
  const update = () => {
    for (const card of document.querySelectorAll('.card')) {
      card.hidden = category !== 'all' && card.dataset.category !== category;
    }
  };
  // No support — the filter simply works without animation
  if (!document.startViewTransition) {
    update();
    return;
  }
  document.startViewTransition(update);
}