Introducción

La View Transitions API permite al navegador capturar estados de la página antes y después de una modificación del DOM, ejecutando una transición acelerada por hardware.

Configuración básica (SPA)

Envuelve tu función de actualización DOM en document.startViewTransition(). El navegador captura los estados saliente y entrante, ejecutando un crossfade de 0.25 segundos por defecto.

Personalización CSS

::view-transition-old(root) { animation: 0.3s ease-out both slide-out; }
::view-transition-new(root) { animation: 0.3s ease-out both slide-in; }

Crea transiciones de deslizamiento, fundido, o cualquier animación personalizada.

Morph animations (Hero transitions)

Usa view-transition-name para vincular elementos entre páginas. El navegador calcula automáticamente los offsets de tamaño y posición para animar el elemento suavemente.

Soporte

Compatible con Chromium y Safari. Implementación en marcha para Firefox. Soporta tanto SPA como MPA (Multi-Page Applications).