Shared Transitions
Animación y Motion
Shared Transitions
3 reglas investigación 2026
41
Shared Transitions
3 reglas
402
view-transition-name único por elemento
Cada view-transition-name debe ser único en el documento en el momento de la transición. Dos elementos con el mismo nombre en la misma página produce snapshots duplicados y el navegador los descarta silenciosamente. Usar el id de la entidad como sufijo.
Preferir
img-prod-42
img-prod-43
.card[data-id="42"] img { view-transition-name: img-prod-42; }
.card[data-id="43"] img { view-transition-name: img-prod-43; }
/* Cada uno tiene snapshot independiente */
.card[data-id="43"] img { view-transition-name: img-prod-43; }
/* Cada uno tiene snapshot independiente */
Evitar
card-img ✗
card-img ✗
.card:nth-child(1) img { view-transition-name: card-img; }
.card:nth-child(2) img { view-transition-name: card-img; }
/* Ambos descartados, nombre colisionante */
.card:nth-child(2) img { view-transition-name: card-img; }
/* Ambos descartados, nombre colisionante */
403
Card-to-page: múltiples nombres
En la transición card-a-página, nombrar al menos tres elementos compartidos: la imagen (card-img-{id}), el título (card-title-{id}) y el contenedor (card-{id}). Cada elemento nombrado viaja de forma independiente, dando la ilusión de que la card se expande en la página.
Preferir
img-art-7
title-art-7
Lista
→
img-art-7
title-art-7
Detalle
La imagen y el título con el mismo nombre viajan de lista a detalle
Evitar
Lista
→
Detalle
Todo el bloque desaparece y reaparece, sin continuidad visual
404
Máximo 3-5 elementos nombrados
Nombrar demasiados elementos con view-transition-name genera snapshots paralelos que compiten y producen jank. Limitar a los 3-5 protagonistas: imagen, título y CTA. El resto viaja con el fade cruzado por defecto.
Preferir
img-art-12 ✓
title ✓
fade
fade
UX
Mobile
Leer artículo
cta ✓
3 snapshots, imagen, título, CTA. El resto usa el fade cruzado global sin costo extra
Evitar
img-art-12 ✕
title ✕
desc ✕
author ✕
UX
Mobile
tags ✕
Leer artículo
cta ✕
7 snapshots simultáneos, GPU saturada, fotogramas perdidos en dispositivos lentos