View Transitions API: Navegación Fluida entre Páginas

Por Jorge Saud · 2 de enero de 2026

Este sitio tiene transiciones suaves entre páginas. No hay ninguna librería de animaciones, no hay JavaScript especial — solo una regla CSS.

@view-transition {
  navigation: auto;
}

Eso es todo. El navegador captura la página actual, carga la nueva en segundo plano, y reproduce un crossfade. Nativo, acelerado por GPU, sin configuración.

Acá está exactamente como lo tengo en este sitio:

@layer root {
  @view-transition {
    navigation: auto;
  }
}

Envuelto en @layer para que no rompa la cascada — pero el núcleo es esa sola declaración.

Morphing de elementos

Donde se pone interesante es con view-transition-name. Si le das el mismo nombre a un elemento en dos páginas distintas, el navegador lo anima entre las dos posiciones automáticamente.

Página de listado:

<img
  src="product.jpg"
  alt="Producto"
  style="view-transition-name: product-image;"
/>

Página de detalle:

<img
  src="product.jpg"
  alt="Producto"
  style="view-transition-name: product-image;"
/>

El navegador ve los nombres coincidentes y crea la animación de morph solo. Para el header, por ejemplo:

.header {
  view-transition-name: header;
}

Queda fijo mientras el resto de la página transiciona. Sin flash, sin salto de layout.

Personalizar la animación

Si el crossfade por defecto no te alcanza, tenés control total sobre los pseudo-elementos:

::view-transition-old(root) {
  animation: 300ms ease-out both fade-out;
}

::view-transition-new(root) {
  animation: 300ms ease-in both fade-in;
}

@keyframes fade-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

@keyframes fade-in {
  from { opacity: 0; transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}

Y si querés slides direccionales:

@keyframes slide-from-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slide-to-left {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

::view-transition-old(root) {
  animation: 300ms slide-to-left ease-out;
}

::view-transition-new(root) {
  animation: 300ms slide-from-right ease-out;
}

Soporte actual

A principios de 2026, Chrome, Edge, Firefox y Safari ya soportan View Transitions. Y si algún navegador viejo no lo entiende, simplemente ignora el @view-transition — sin errores, sin nada roto.

Navegás entre páginas en este sitio y ya lo estás viendo en acción. Vale la pena tenerlo en cuenta para cualquier sitio multipágina.