Las CSS View Transitions entre documentos permiten animar la navegación entre páginas de un sitio web sin necesidad de un framework JavaScript, routers SPA ni fetch manual. Se activan con una sola regla @view-transition { navigation: auto } dentro de un bloque que respeta prefers-reduced-motion, de modo que los usuarios que prefieren menos movimiento ven un salto de página convencional. Chrome, Edge y Safari las admiten desde mediados de 2024, mientras que Firefox las ignora y sigue navegando de forma normal, sin que haga falta detección de compatibilidad.
La transición por defecto es un crossfade de toda la página, útil pero poco vistoso. Para ir más allá, se asigna un view-transition-name único a cada elemento que se quiera animar de forma independiente. En el blog descrito, las tres columnas de la rejilla (barra lateral izquierda, contenido principal y barra lateral derecha) reciben nombres propios; la columna central se desliza hacia la izquierda al salir y entra desde la izquierda, con 0,1 s de salida y 0,2 s de entrada para que la lectura sea de «apartarse» y no un intercambio simétrico. Los widgets de la barra lateral (etiquetas, webmentions, entradas relacionadas) se difuminan en su propia línea de tiempo mediante una propiedad personalizada --vtn, lo que evita saltos cuando el alto del contenido varía.
Un punto delicado es la estabilidad geométrica: si un elemento cambia de tamaño entre el estado de salida y el de llegada, se produce un parpadeo visible. En la práctica, la foto de autor necesitaba un width firme para que aspect-ratio: 1 calculase una altura, y la columna central, definida solo como 5fr, pasaba a minmax(50%, 5fr) para fijar un suelo y evitar derives de pocos píxeles cuando cambian los contenidos laterales. Las transiciones entre documentos tienen además un tiempo de espera silencioso de 4 segundos. Por lo demás, no hace falta ningún @supports ni fallback: si el navegador no lo entiende, simplemente navega como siempre.