view-transition en CSS: Navegación en scroll con Animaciones Automáticas, en imágenes y páginas

▶

Podemos agregar una transición suave entre cada una de las páginas, como por ejemplo entre la vista de listado y la vista de detalle, que es lo que tenemos aquí. Esto ayuda a que el cambio no sea tan agresivo o tan brusco, sino mucho más fluido y agradable visualmente.

Para lograr esto, podemos utilizar la API de view-transition en CSS, que nos permite implementar transiciones suaves entre páginas. Con esta herramienta, también podríamos añadir animaciones para que el contenido aparezca desde un lado, desde abajo, con escalado u otros efectos visuales.

Lo único que debemos hacer es añadir lo siguiente en nuestra hoja de estilo CSS:

@view-transition {
 navigation: auto;
}

Y eso sería prácticamente todo. Con solo estas líneas ya logramos una transición visual más suave entre páginas.

Compatibilidad y soporte

El soporte es bastante amplio. Prácticamente todos los navegadores modernos lo admiten, así que podemos usarlo sin mayor problema. Si el navegador no soporta esta propiedad, simplemente la ignora y la navegación seguirá funcionando como antes, sin errores ni interrupciones:

https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition

Una vez aplicado, notarás que las transiciones entre vistas ahora tienen un suave efecto de desvanecimiento o desenfoque (blur). Esto lo explicaremos mejor en la siguiente clase, pero por ahora puedes observar que el cambio ya no es tan brusco como antes, y eso era justo lo que buscábamos.

▶

¿Te imaginas poder animar los cambios de vista entre páginas o secciones sin usar frameworks ni librerías externas?
Con View-transition en CSS, eso ya es posible. Esta nueva API del navegador permite crear transiciones suaves entre estados del documento, de forma nativa y controlada solo con CSS (y opcionalmente algo de JavaScript).

En este artículo te mostraré cómo funciona, cómo se compara con el clásico scroll-behavior: smooth, y cómo puedes aplicarlo hoy mismo para mejorar la experiencia visual de tus usuarios.

Te voy a enseñar cómo puedes hacer la navegación interna animada en un documento HTML con una sola línea de código CSS.

Recordemos lo básico: tenemos un enlace que apunta a un identificador de un título:

<a href="#heading-0" class="block text-lg mt-0 mb-0 text-blue-600 hover:underline ">
view-transition </a>
<h2 id="heading-0">view-transition </h2>

Como sabemos, un identificador siempre debe ser único en la página HTML.

Qué es view-transition y para qué sirve

View-transition es una tecnología que permite animar el cambio visual entre dos estados del DOM —por ejemplo, al navegar entre páginas o modificar contenido dinámicamente—.

Hasta hace poco, lograr algo así requería JavaScript, opacity o transform, o incluso un framework SPA (Single Page Application).
Ahora, gracias a View Transition API, el navegador gestiona de forma automática las capturas de antes y después de un cambio, y las anima usando CSS.

Cuando empecé a experimentar con animaciones suaves usando scroll-behavior, noté que el salto a view-transition era el paso natural: misma fluidez, pero con control total sobre las vistas.

¿Cómo logramos que la navegación sea animada mediante CSS y la regla @view-transition?

La magia comienza con la regla @view-transition en CSS.
Define cómo se comporta la transición visual cuando ocurre un cambio de vista.

html {
  scroll-behavior: smooth;
}

Al aplicarla sobre el documento HTML, la navegación se vuelve automáticamente animada. Así de simple. Con eso, cada vez que hacías clic en un enlace con href="#section", la página se deslizaba suavemente hasta el destino. Así de simple.

Alternativa con JavaScript

También podemos hacerlo muy fácilmente con JavaScript.
En mi visor de mi web academia, cuando hago clic en un enlace, se ejecuta la misma lógica: automáticamente se realiza el scroll de manera animada:

document .querySelector(".YourElement")
.scrollIntoView({ behavior: "smooth", block: "center" });

Compatibilidad y limitaciones

Como toda tecnología nueva, @view-transition todavía tiene un soporte parcial; para comprobar la compatibilidad, tenemos:

if (document.startViewTransition) {
 // Usa la API nativa
} else {
 // Fallback con animación manual
}

Para esto se emplea el método scrollIntoView sobre un elemento HTML.
Los parámetros los puedes consultar en internet, pero básicamente sirven para que la animación sea suave y el visor se posicione en el medio.

Otra alternativa es aplicarlo de manera global sobre el objeto window, en lugar de asociarlo a un elemento específico:

  window.scroll({
    top: 0,
    behavior: "smooth",
  });

view-transition-name: La Nueva Forma de Hacer Transiciones con CSS entre páginas entre imágenes

▶

Aquí tenemos otra API muy interesante que me recuerda mucho al efecto Hero que tenemos en Flutter, el cual, por ejemplo, podemos aplicar a imágenes. Personalmente, creo que es donde mejor se nota, pero en realidad puedes usarlo con cualquier elemento.

Tenemos una imagen en la vista de listado, y al hacer clic puedes ver que realiza una suave animación de escalado para la página de detalle, importante acotar que DEBE SER LA MISMA IMAGEN. No es brusca como suele ser por defecto en las aplicaciones web, sino mucho más fluida y natural.

La API: view-transition-name

Para esto usamos la API de view-transition, específicamente la propiedad view-transition-name. Esta propiedad define un nombre único que se usará para vincular el mismo elemento en distintas vistas, por ejemplo, del listado al detalle.

En la vista de listado (index), asignamos el nombre correspondiente:

<img class="post" *** src="image1.png" style="view-transition-name: {{ $b->slug }}">

En la vista de detalle, hacemos exactamente lo mismo.

<img class="post" *** src="image1.png" style="view-transition-name: {{ $book->slug }}">

La implementación anterior es de un proyecto en Laravel, pero, lo puedes replicar en otros tipos de tecnologías como Django y con otros campos como id…

Es clave que el nombre sea idéntico en ambas vistas. Si lo cambiamos aunque sea un poco, como en el ejemplo con un valor diferente, la animación no se aplicará y el cambio volverá a ser brusco.

Restricciones en los nombres

Ten en cuenta que no puedes usar espacios ni caracteres especiales (como puntos, comillas, etc.). Por eso, no es recomendable usar directamente un nombre de archivo o una ruta. En su lugar, lo mejor es usar el slug o una variable limpia, similar a cómo se nombran variables en JavaScript o CSS.

Aplicación del view-transition-name a otros elementos

Aunque aquí usamos una imagen, puedes aplicar esta animación a cualquier elemento HTML. En otros ejemplos puede ser un <header>, un botón, o cualquier bloque de contenido.

Compatibilidad y soporte

El soporte en navegadores es bastante bueno. En caso de que el navegador no lo soporte, simplemente lo ignora —al igual que la propiedad @view-transition anterior— y el comportamiento será el predeterminado (sin animación). No hay pérdida:

https://developer.mozilla.org/en-US/docs/Web/CSS/view-transition-name

Lo único que no me convence del todo es que hay que definir el view-transition-name directamente en el HTML, lo que puede “ensuciar” un poco el marcado. Aun así, vale la pena por lo fácil que es de usar y por el efecto visual tan elegante que conseguimos.

En resumen: bueno, sencillo, compatible y con gran resultado.

Conclusión

La llegada de View Transition API marca un antes y un después en cómo animamos la web.
Ya no se trata solo de mover elementos, sino de crear continuidad visual entre estados, algo que antes solo veíamos en apps nativas.

En mi caso, pasar de scroll-behavior: smooth a view-transition fue como subir de nivel: más control, más fluidez y la misma simplicidad.

Así de simple, pero con resultados profesionales.

Preguntas frecuentes (FAQs)

• ¿Qué diferencia hay entre View Transition API y scroll-behavior?
  • scroll-behavior solo anima el desplazamiento del viewport, mientras que view-transition anima el cambio completo de contenido.
• ¿Funciona en todas las páginas HTML?
  • Sí, mientras las páginas pertenezcan al mismo dominio (origen).
• ¿Puedo combinarlo con frameworks como React o Vue?
  • Sí, y de hecho es una gran opción para SPA. Solo debes controlar los renders y llamar a startViewTransition() al cambiar de ruta.
• ¿Qué pasa si el navegador no lo soporta?
  • Nada grave: el contenido se muestra de inmediato, sin transición.