View Transitions: navegar sin parpadeo, como una app

Toca un contacto en WhatsApp: la foto "viaja" y se expande hacia la conversación. Ahora haz clic en un enlace de una web clásica: pantallazo blanco, página nueva. Esa diferencia de trato — la app fluye, la web parpadea — tenía décadas... hasta la View Transitions API: transiciones entre páginas completas, declaradas en CSS. Esta lección es más conceptual que las demás (el efecto ocurre ENTRE páginas, así que no cabe en un preview), pero sales con la receta completa para tu propio sitio.

El truco de magia: dos fotos y un fundido

Activarla: cuatro líneas en ambas páginas

Para las navegaciones normales entre páginas de un mismo sitio (los MPA que llevas construyendo todo el curso), la API es puro CSS:

Eso es todo para el fundido por defecto: navega entre dos páginas de tu sitio con esa regla y el parpadeo blanco se convierte en crossfade. Para personalizarlo, el navegador expone las "fotos" como pseudo-elementos animables con los @keyframes de siempre:

Léelo con tus lentes del módulo: la vieja SALE con ease-in (acelera al irse), la nueva ENTRA con ease-out (aterriza suave) y un pelín de delay con su backwards — cada pieza de las últimas lecciones, en su lugar.

view-transition-name: la foto que viaja

El fundido global está bien; la magia de verdad es conectar UN elemento de la página vieja con SU versión en la nueva — la miniatura del artículo que se expande hasta ser la imagen de cabecera:

Mismo nombre en ambas páginas = el navegador entiende "son EL MISMO objeto" y anima posición, tamaño y forma de una a la otra automáticamente. Dos reglas del mecanismo: cada view-transition-name debe ser ÚNICO en su página (dos elementos con el mismo nombre en una página rompen la transición completa), y el nombre conecta CUALQUIER par de elementos — no tienen que ser la misma etiqueta ni el mismo contenido.

Soporte y criterio (la nota honesta)

• Las transiciones entre páginas (@view-transition, cross-document) funcionan en Chrome y Edge desde 2024 y Safari desde la versión 18.2; Firefox va más atrás (la variante same-document llegó primero; verifica el estado actual en caniuse). La buena noticia estructural: es mejora progresiva perfecta por diseño — donde no hay soporte, la navegación simplemente es la de siempre. Cero riesgo de contenido roto, a diferencia del reveal de la lección pasada.
• Existe una segunda variante — same-document — para transiciones dentro de la misma página (reordenar una lista, cambiar de pestaña visual), que se dispara desde JavaScript con document.startViewTransition(). Es la puerta pendiente del módulo 14; los frameworks del final del curso (Astro, Next) la usan por debajo para sus transiciones de página.
• Respeto de siempre: las view transitions también se envuelven en @media (prefers-reduced-motion: reduce) — ahí se anulan los pseudo-elementos animados o directamente la regla @view-transition.

Mini-reto

Este es de laboratorio real, no de playground: toma dos páginas de "El Observador" (portada y un artículo), agrega el @view-transition a su CSS compartido y navega entre ellas en Chrome o Edge. Cuando veas el fundido, conecta la imagen de la noticia destacada con la cabecera del artículo vía view-transition-name y navega otra vez. La primera vez que la foto VIAJA en un sitio hecho por ti no se olvida.

Qué sigue

Ya animas contra el reloj, contra el scroll y entre páginas. Antes de los dos retos finales, la lección más importante del módulo — y puede que del curso: para quién puede ser DAÑINO todo este movimiento, y cómo se anima con empatía de verdad, más allá del copy-paste del media query.