La API View Transitions: transiciones suaves de página y de estado

La API View Transitions anima el cambio entre dos estados de una página — una lista que se convierte en una vista de detalle, un tema que se alterna, un elemento que desaparece por un filtro — casi sin código de animación. El navegador captura el estado antiguo, captura el nuevo y hace un fundido (o una transformación) entre ambos por ti.

Transiciones same-document

Para cambios de estado dentro de una misma página — una aplicación de una sola página que actualiza el DOM — envuelve la actualización del DOM en document.startViewTransition():

function showDetail(item) {
  if (!document.startViewTransition) {
    updateDOM(item); // sin soporte: solo actualiza, sin animación
    return;
  }
  document.startViewTransition(() => updateDOM(item));
}

El callback hace tu trabajo habitual sobre el DOM. El navegador captura una instantánea «antes» justo antes de ejecutarlo y una «después» al terminar, y luego anima entre ambas. Por defecto es un fundido encadenado suave — ya una buena mejora gratis.

Personalizar la animación con CSS

Durante una transición, el navegador construye un árbol de pseudoelementos que puedes estilar. El punto de enganche más simple es el grupo de transición raíz:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

Apuntas a la instantánea saliente con ::view-transition-old() y a la entrante con ::view-transition-new(), y luego aplicas la animación CSS que quieras.

Animar un elemento concreto entre estados

Para que un elemento parezca moverse y transformarse entre los dos estados — una miniatura que crece hasta una imagen completa — dale un view-transition-name compartido en ambos estados:

.hero-image {
  view-transition-name: hero;
}

El nombre debe ser único en la página en todo momento. Cuando el navegador encuentra el mismo nombre antes y después, interpola directamente la posición y el tamaño de ese elemento en vez de hacer un fundido, produciendo un efecto continuo de «elemento compartido».

Transiciones cross-document (MPA)

Los sitios multipágina también pueden animar la transición entre navegaciones completas, sin JavaScript. Se activa desde CSS en ambas páginas:

@view-transition {
  navigation: auto;
}

Con esa única regla, las navegaciones same-origin se animan automáticamente. Valores view-transition-name idénticos en ambas páginas permiten que un elemento — por ejemplo la imagen hero de un artículo — se prolongue de la página de lista a la del artículo.

Referencia rápida

Objetivo	API
Cambio de estado SPA	document.startViewTransition(cb)
Navegación MPA	@view-transition { navigation: auto }
Estilar el fundido	::view-transition-old/new(root)
Elemento compartido	view-transition-name (único)

Soporte y mejora progresiva

Las transiciones same-document están en los navegadores Chromium y Safari; el soporte cross-document se está desplegando y Firefox implementa ambas. Como proteges con if (!document.startViewTransition) y la versión cross-document es una activación puramente CSS, la API se degrada con elegancia: los navegadores incompatibles simplemente actualizan la página sin animación. Por eso es seguro adoptarla hoy como mejora progresiva.

Recurre a las view transitions cuando un salto entre estados se sienta brusco. Un poco de movimiento da al usuario sensación de continuidad — de dónde vienen las cosas y a dónde van — sin escribir ni un solo keyframe a mano en la mayoría de los casos.