Astro View Transitions: Configuración, Animations, y Pitfalls

Easton editorial illustration: build pipeline conveyor

Monté un blog con Astro con mucho cuidado en diseño y maquetación, pero al hacer clic en un enlace la página parpadeaba en blanco antes de cargar la siguiente. Era como pasar de las animaciones fluidas de un iPhone a los saltos bruscos de Windows 98.

El año pasado, mientras ayudaba a un amigo con su sitio, me preguntó tras ver un portfolio: «¿Por qué al pulsar un proyecto la imagen hace zoom suave y la nuestra solo recarga de golpe?» Me quedé incómodo: ¿había que reescribir todo como SPA en React y perder las ventajas estáticas de Astro?

Hasta que descubrí la combinación View Transitions API + Astro. La primera vez me dejó boquiabierto: solo 2 líneas en el <head> del Layout y los cambios de página pasaron a ser transiciones suaves. Sin React, sin Vue, ni siquiera una librería JavaScript.

En este artículo te enseño paso a paso:

Qué es la View Transitions API y por qué explotó en 2025 (más del 85 % de soporte en navegadores)
3 formas de activar transiciones en Astro (de 2 líneas de código a personalización avanzada)
Cómo lograr fade, slide, morphing de elementos y otros efectos
Un caso práctico completo: transición fluida de listado a detalle de artículo
Problemas frecuentes y soluciones (créeme, me los he encontrado todos)

¿Listo para que tu sitio Astro se sienta como una app? Empecemos.

¿Qué es la View Transitions API? ¿Por qué funciona tan bien?

La «magia» nativa del navegador — sin librerías

La View Transitions API es una función nativa del navegador. En pocas palabras: le dices al navegador «voy a cambiar el contenido» y él hace dos «fotos» (una de la página antigua y otra de la nueva), luego genera automáticamente una animación suave entre ambas.

¿Suena abstracto? Un ejemplo: en la home de tu blog hay un artículo titulado «Tutorial de Astro»; al hacer clic vas al detalle. El salto clásico es: desaparece la home → pantalla en blanco → aparece el detalle. Con View Transitions, el navegador reconoce que el título en home y en detalle es «el mismo elemento» y lo mueve suavemente de la lista a la cabecera del artículo, mientras el resto hace fade in/out.

Lo mejor: estas animaciones las genera el navegador. No hace falta CSS complejo ni librerías como GSAP o Framer Motion.

¿Por qué lograr efecto SPA sin React/Vue?

Ante animaciones entre páginas, muchos piensan en React Router o Vue Router con componentes de transición. Pero esas opciones comparten un defecto: peso.

Un SPA tradicional para transiciones necesita:

Convertir toda la app en una sola página con rutas controladas por JavaScript
Aumentar el bundle y ralentizar la carga inicial
Tratar el SEO aparte (hoy está mejor, pero sigue siendo un tema)

Astro + View Transitions es más elegante:

Mantiene arquitectura multipágina (MPA): cada página es HTML independiente, SEO natural
Carga bajo demanda: solo el JS y CSS de la página actual
API nativa: sobrecarga mínima, sin inflar el bundle
Mejora progresiva: navegadores sin soporte hacen navegación normal sin romper nada

Probé el mismo blog: la versión React SPA superaba 300 KB empaquetados; Astro rondaba 50 KB, y con View Transitions el tamaño casi no cambió.

85%+

Soporte en navegadores

Soporte de View Transitions API en 2025

50KB vs 300KB

Comparativa de bundle

Astro ~6 veces más ligero que React SPA

2 líneas

Código de configuración

Añadir <ViewTransitions /> en el head del Layout

Soporte en navegadores en 2025: ya puedes usarla con tranquilidad

Buenas noticias: en 2025 el soporte de View Transitions API supera el 85 %.

En concreto:

Chrome 111+: transiciones en el mismo documento (cambio de estado en una página)
Chrome 126+: transiciones entre documentos (saltos entre páginas) — lo que usamos en Astro
Safari: ya compatible
Edge: basado en Chromium, soporte completo
Firefox 144+ (octubre 2025): View Transitions es proyecto clave de Interop 2025; Firefox por fin al día

Curiosamente, el equipo de React integró View Transitions en el core en 2025 (react@canary ya lo soporta). La API ya es estándar de facto en frontend.

¿Y el 15 % sin soporte? Astro hace degradación automática: navegación normal, funcionalidad intacta, solo sin animación. Esa es la mejora progresiva.

3 formas de activar View Transitions en Astro

Teoría hecha: vamos a la práctica, de lo más simple a lo avanzado.

Método 1: activación global (recomendado, 2 líneas)

Si quieres transiciones en todo el sitio, abre tu Layout (src/layouts/BaseLayout.astro o src/layouts/Layout.astro) y añade en <head>:


---

import { ViewTransitions } from 'astro:transitions';

---

<html>
  <head>
    <title>My Astro Site</title>
    <ViewTransitions />
  </head>
  <body>
    <slot />
  </body>
</html>

¡Así de simple! Arranca el servidor (npm run dev), haz clic en cualquier enlace y verás fade suave entre páginas.

La primera vez pensé que era caché del navegador; tras varios refrescos confirmé: es realmente tan fácil.

Cuándo usarlo: blogs, documentación, portfolios — sitios donde quieres transiciones en todas las páginas.

Método 2: activación selectiva (solo en páginas concretas)

A veces solo quieres animaciones en home y about, no en el panel de admin. Añade en el <head> de esa página:


---

import { ClientRouter } from 'astro:transitions';

---

<html>
  <head>
    <title>About Page</title>
    <ClientRouter />
  </head>
  <body>
    <!-- Page content -->
  </body>
</html>

ClientRouter es el nombre nuevo; antes era ViewTransitions. Astro lo renombró porque no solo anima vistas: intercepta la navegación y convierte la MPA en «pseudo-SPA». El nombre antiguo sigue funcionando.

Cuándo usarlo: apps mixtas con páginas que necesitan tratamiento especial.

Método 3: probar rápido (sin tocar tu código)

Para probar sin modificar el proyecto, usa el demo oficial de Astro:

👉 View Transitions Demo

Muestra listado a detalle, galerías, reproductor de música, etc. Juega primero, elige efectos y luego impleméntalos.

Consejo: ábrelo en Chrome 126+, Safari o Firefox reciente.

3 señales de que funciona

Tras añadir el código, comprueba:

Sin flash blanco al cambiar de página: transición suave, no «blanco → página nueva»
Elementos comunes sin re-render: la barra de navegación no desaparece y reaparece (luego veremos transition:persist)
Sin errores en consola: si hay errores, revisa versión de Astro o configuración

La primera vez que vi la nav sin parpadeos pensé que me engañaban los ojos; comparando con View Transitions desactivado, confirmé que funcionaba.

Personalizar animaciones — que encajen con tu marca

El fade por defecto es limpio, pero a veces quieres más personalidad. Aquí van 4 técnicas, de básico a avanzado.

Técnica 1: transition:animate para cambiar el tipo

Astro trae 4 animaciones con la directiva transition:animate. Por ejemplo, contenido que entra deslizándose:

<article transition:animate="slide">
  <h1>Article Title</h1>
  <p>Article content...</p>
</article>

Las 4 integradas:

fade (por defecto): entrada/salida suave, la más versátil
slide: deslizamiento desde la derecha, ideal en detalle de artículo
initial: estilo por defecto del navegador, casi sin animación
none: sin animación, para elementos que no deben transicionar

Mi combo habitual: slide en el contenido principal, fade en la barra lateral.

También puedes ajustar duración con fade() y slide():


---

import { fade, slide } from 'astro:transitions';

---

<article transition:animate={slide({ duration: '0.5s' })}>
  <!-- Slide for 0.5 seconds -->
</article>

<aside transition:animate={fade({ duration: '0.2s' })}>
  <!-- Fade for 0.2 seconds -->
</aside>

Técnica 2: transition:name para «morphing»

Lo más interesante: le dices al navegador que dos elementos en páginas distintas son el mismo y hace morphing.

Caso clásico: título de listado a detalle.

Página de listado (index.astro):

<ul>
  <li>
    <a href="/posts/astro-guide">
      <h2 transition:name="post-title-astro-guide">Astro Complete Guide</h2>
    </a>
  </li>
</ul>

Página de detalle (posts/astro-guide.astro):

<article>
  <h1 transition:name="post-title-astro-guide">Astro Complete Guide</h1>
  <p>Article content...</p>
</article>

Ambos títulos usan transition:name="post-title-astro-guide". Al hacer clic, el título se mueve de la lista a la cabecera del detalle ajustando tamaño y color.

Importante: transition:name debe ser único en cada página. Con varios artículos, usa valores dinámicos:

{posts.map(post => (
  <h2 transition:name={`post-title-${post.slug}`}>{post.title}</h2>
))}

La primera vez que vi el título «volar» al detalle pensé que era magia negra.

Técnica 3: transition:persist para mantener estado

Elementos que no deben reiniciarse al cambiar de página:

Reproductor de música (sin cortar la reproducción)
Barra de navegación (evitar re-render)
Icono del carrito (mantener el contador)

Usa transition:persist:

<MusicPlayer client:load transition:persist />

Al navegar, MusicPlayer no se destruye: se «traslada» a la nueva página con su estado (progreso de reproducción, etc.).

Avanzado: transition:persist-props

Por defecto, transition:persist puede re-renderizar con props nuevas. Si no quieres perder lo escrito en un buscador de la nav:

<SearchBar
  client:load
  transition:persist
  transition:persist-props
/>

Lo usé en un sitio de docs: el usuario escribía en el buscador, hacía clic en un enlace y el texto seguía ahí. Mejora notable de UX.

Técnica 4: control global de animaciones

Animación por defecto en toda la página, en <html>:

<html transition:animate="slide">
  <head>
    <ViewTransitions />
  </head>
  <body>
    <!-- All content defaults to slide animation -->
  </body>
</html>

Y sobrescribe en hijos:

<nav transition:animate="fade">
  <!-- Navigation bar uses fade alone -->
</nav>

<article>
  <!-- Article uses inherited slide -->
</article>

Control por capas, muy flexible en proyectos grandes.

Caso práctico: transición completa en un blog

Tras teoría y trucos, un proyecto completo: home → detalle de artículo.

Escenario

Estructura típica:

Home: listado con título, extracto y portada
Detalle: artículo completo con título, portada y cuerpo

Objetivos:

Al pulsar el título, morphing hasta la cabecera del detalle
Misma idea con la portada
Resto del contenido con fade
Nav estable, sin re-render

Paso 1: activar View Transitions en el Layout

En src/layouts/BaseLayout.astro:


---

import { ViewTransitions } from 'astro:transitions';

interface Props {
  title: string;
}

const { title } = Astro.props;

---

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <ViewTransitions />
  </head>
  <body>
    <nav transition:persist transition:name="main-nav">
      <a href="/">Inicio</a>
      <a href="/about">Acerca de</a>
    </nav>
    <main>
      <slot />
    </main>
  </body>
</html>

La nav lleva transition:persist y transition:name="main-nav" para no parpadear.

Paso 2: listado — transition:name en título y portada

En src/pages/index.astro:


---

import BaseLayout from '../layouts/BaseLayout.astro';

const posts = await Astro.glob('./posts/*.md');

---

<BaseLayout title="Mi blog">
  <h1>Últimos artículos</h1>
  <div class="post-list">
    {posts.map(post => (
      <article class="post-card">
        <a href={post.url}>
          <img
            src={post.frontmatter.cover}
            alt={post.frontmatter.title}
            transition:name={`cover-${post.frontmatter.slug}`}
          />
          <h2 transition:name={`title-${post.frontmatter.slug}`}>
            {post.frontmatter.title}
          </h2>
          <p>{post.frontmatter.excerpt}</p>
        </a>
      </article>
    ))}
  </div>
</BaseLayout>

Claves:

Portada: transition:name={'cover-${post.frontmatter.slug}'}
Título: transition:name={'title-${post.frontmatter.slug}'}
slug garantiza nombres únicos por artículo

Paso 3: detalle — mismos transition:name

En tu plantilla de artículo (src/layouts/PostLayout.astro):


---

import BaseLayout from './BaseLayout.astro';

const { frontmatter } = Astro.props;

---

<BaseLayout title={frontmatter.title}>
  <article class="post-detail">
    <img
      src={frontmatter.cover}
      alt={frontmatter.title}
      transition:name={`cover-${frontmatter.slug}`}
      class="cover-image"
    />
    <h1 transition:name={`title-${frontmatter.slug}`}>
      {frontmatter.title}
    </h1>
    <div class="post-meta">
      <time>{frontmatter.date}</time>
      <span>{frontmatter.author}</span>
    </div>
    <div class="post-content" transition:animate="slide">
      <slot />
    </div>
  </article>
</BaseLayout>

Portada y título comparten transition:name con el listado; el cuerpo usa transition:animate="slide".

Paso 4: CSS para transiciones más fluidas

En Layout o estilos globales:

/* Optimize transition performance */
[transition:name] {
  will-change: transform;
}

/* Cover image styles on list and detail pages */
.post-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.post-detail .cover-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
}

/* Title styles */
.post-card h2 {
  font-size: 1.5rem;
  color: #333;
}

.post-detail h1 {
  font-size: 2.5rem;
  color: #111;
  margin-top: 1rem;
}

will-change: transform avisa al navegador para optimizar con antelación.

Paso 5: probar

npm run dev

En la home, pulsa un título. Verás:

Título moviéndose a la cabecera del detalle con cambio de tamaño
Portada moviéndose y ampliándose
Nav quieta, sin parpadeos
Resto (extracto, fecha, etc.) con fade suave

La primera vez pensé: «esto es lo que buscaba». Frente al salto brusco clásico, la mejora de UX es enorme.

Opcional: estado de carga

Si el artículo es pesado, puede haber retardo. Astro ofrece hooks:

<script>
  document.addEventListener('astro:before-preparation', () => {
    // Show loading animation
    document.body.classList.add('loading');
  });

  document.addEventListener('astro:page-load', () => {
    // Hide loading animation
    document.body.classList.remove('loading');
  });
</script>

<style>
  body.loading::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

Mientras carga el contenido, un spinner mejora la percepción de fluidez.

Técnicas avanzadas y problemas frecuentes

Comparto trucos avanzados y errores que ya me he comido.

Técnica avanzada 1: respetar «reducir movimiento»

Algunos usuarios tienen sensibilidad vestibular o simplemente no quieren animaciones; activan «reducir movimiento» en el sistema. Debemos respetarlo.

Astro y el navegador lo gestionan, pero puedes controlarlo en CSS:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

O en componentes Astro:

<div transition:animate={
  typeof window !== 'undefined' &&
  window.matchMedia('(prefers-reduced-motion: reduce)').matches
    ? 'none'
    : 'slide'
}>
  Content
</div>

Detalle fácil de olvidar, pero crucial para parte de tu audiencia.

Técnica avanzada 2: ciclo de vida de scripts

En una MPA clásica, cada salto reejecuta scripts. Con View Transitions la navegación es «pseudo-SPA» y el comportamiento cambia.

Eventos de ciclo de vida en Astro:

// Page load complete (including first load and after navigation)
document.addEventListener('astro:page-load', () => {
  console.log('Page content updated');
  // Re-initialize UI components, bind events, etc.
});

// Navigation about to start
document.addEventListener('astro:before-preparation', () => {
  console.log('About to navigate to new page');
  // Clean up timers, cancel network requests, etc.
});

// Navigation cancelled (like user clicked back button)
document.addEventListener('astro:after-swap', () => {
  console.log('DOM updated but animation not yet complete');
});

Trampa común: listeners sin limpiar en astro:before-preparation → fugas de memoria.

Tuve un listener de scroll sin limpiar; tras varias navegaciones la página empezaba a ir a tirones. Se arregló añadiendo cleanup.

Técnica avanzada 3: optimizar rendimiento

View Transitions es ligera, pero muchos elementos animados pueden ralentizar. Consejos:

Limita elementos en transición: no pongas transition:name en todo; solo en lo clave
Usa will-change: transform: optimización anticipada
Evita reflow en animación: no cambies width, height, padding a mitad de transición
Prueba en dispositivos reales: tu máquina de desarrollo no representa a todos

/* Good practice */
.animated-element {
  will-change: transform, opacity;
  transform: translateX(0);
}

/* Bad practice */
.animated-element {
  width: 100px; /* Modifying width triggers reflow, poor performance */
}

Problema 1: la animación no funciona

Síntoma: añadiste transition:name pero el salto sigue siendo brusco.

Causas y soluciones:

transition:name duplicado en la misma página
Nombres distintos entre listado y detalle
Navegador sin soporte: revisa la consola
Astro antiguo: actualiza a Astro 3.0+ (View Transitions llegó en 3.0)

# Check Astro version
npx astro --version

# Upgrade Astro
npm install astro@latest

Problema 2: parpadeos o saltos

Síntoma: el elemento parpadea o salta de posición.

Causas y soluciones:

CSS inconsistente entre páginas (display, position, etc.)
Imagen sin cargar: loading="eager" o altura fija
Falta transition:persist en nav, reproductor, etc.

<!-- Fix image flashing -->
<img alt=""
  src={cover}
  loading="eager"
  style="height: 200px"
  transition:name="cover"
/>

Problema 3: dirección incorrecta al volver atrás

Síntoma: hacia adelante bien, pero al pulsar atrás la animación va en la misma dirección.

Solución: Astro gestiona dirección, pero con animaciones custom puede hacer falta:

document.addEventListener('astro:before-preparation', (event) => {
  const isBack = event.direction === 'back';
  if (isBack) {
    // Adjust animation direction
    document.documentElement.classList.add('reverse-animation');
  }
});

.reverse-animation [transition:animate="slide"] {
  animation-direction: reverse;
}

Problema 4: conflictos con scripts de terceros

Síntoma: tras activar View Transitions, Google Analytics, anuncios, etc. dejan de registrar bien.

Motivo: esos scripts suelen ejecutarse una vez al cargar; View Transitions intercepta la navegación y no se enteran del cambio.

Solución: re-disparar en astro:page-load:

document.addEventListener('astro:page-load', () => {
  // Google Analytics
  if (typeof gtag !== 'undefined') {
    gtag('config', 'GA_MEASUREMENT_ID', {
      page_path: window.location.pathname,
    });
  }

  // Facebook Pixel
  if (typeof fbq !== 'undefined') {
    fbq('track', 'PageView');
  }
});

Me pasó con GA: las estadísticas fallaban hasta reactivar manualmente en cada transición.

Compatibilidad y mejora progresiva

View Transitions ya supera el 85 % de soporte, pero no es universal. Astro degrada a navegación normal sin romper nada.

Detección manual:

if (document.startViewTransition) {
  console.log('Browser supports View Transitions');
} else {
  console.log('Browser doesn\'t support, auto fallback');
}

Navegadores modernos: experiencia fluida; antiguos: sitio usable sin animaciones.

Conclusión

Resumen:

View Transitions API + Astro = la forma más simple de transiciones entre páginas. Sin React, Vue ni librerías de terceros: 2 líneas en el <head> del Layout y tu sitio se siente como una app.

Desde fade básico hasta slide, morphing y persistencia de estado, convertimos una MPA rígida en una web moderna y fluida. Todo sobre API nativa, sobrecarga mínima y degradación automática.

Si quieres probar ya:

Empieza simple: <ViewTransitions /> en el Layout y mira el efecto por defecto
Encuentra el detalle que te sorprende: nav sin parpadeo, morphing del título…
Personaliza: transition:animate, transition:name según tu marca
Prueba en la vida real: distintos navegadores y dispositivos

En cada proyecto nuevo lo activo primero: tan simple y tan bueno. A veces la buena UX no requiere código complejo, sino la herramienta adecuada.

Si te atasacas:

Documentación oficial de Astro
View Transitions Demo para inspiración
Consola del navegador por errores

Si logras algo chulo con View Transitions, comparte el enlace en comentarios. Me encantaría ver vuestras ideas.

Abre tu proyecto Astro y hazlo fluido.

Configuración completa de Astro View Transitions

Experiencia fluida tipo app con 2 líneas de código: de configuración básica a personalización avanzada, con caso práctico completo

⏱️ Estimated time: 15 min

1
Step 1: Entender la View Transitions API y el soporte en navegadores
Qué es la View Transitions API:
• Función nativa del navegador
• Le indicas que vas a cambiar el contenido
• Captura dos instantáneas (página antigua y nueva)
• Genera automáticamente una animación suave entre ambas
• No necesitas CSS complejo ni librerías como GSAP o Framer Motion

Más del 85 % de soporte en 2025:
• Chrome 111+: transiciones en el mismo documento
• Chrome 126+: transiciones entre documentos (lo que usamos en Astro)
• Safari: compatible
• Edge: soporte completo basado en Chromium
• Firefox 144+: compatible (proyecto clave de Interop 2025)

El equipo de React integró View Transitions en el core en 2025 (react@canary), señal de que la API ya es estándar en frontend.

Compatibilidad:
• Astro degrada automáticamente
• Navegadores sin soporte: navegación normal
• Funcionalidad intacta, solo sin animación
• Eso es mejora progresiva
2
Step 2: Ventajas de Astro + View Transitions
Por qué lograr efecto SPA sin React/Vue:

Problemas del SPA tradicional:
• Toda la app en una sola página
• Rutas controladas por JavaScript
• Bundle más grande y carga inicial más lenta
• SEO aparte

Ventajas de Astro + View Transitions:
• MPA: HTML independiente por página, SEO natural
• Carga bajo demanda de JS y CSS
• API nativa, sobrecarga mínima, sin inflar el bundle
• Mejora progresiva con degradación automática

Comparativa de rendimiento:
• Mismo blog de prueba
• React SPA: más de 300 KB empaquetados
• Astro: unos 50 KB
• Con View Transitions el tamaño casi no cambia
3
Step 3: 3 formas de activación: de lo simple a lo avanzado
Método 1 — lo más simple:
• Añadir <ViewTransitions /> en el head del Layout
• Solo 2 líneas de código
• Transiciones suaves al instante
• Sin React, Vue ni librerías extra

Método 2 — personalizar:
• transition:animate: fade, slide, none
• transition:name para identificar el mismo elemento entre páginas
• El título se mueve de la lista a la cabecera del detalle

Método 3 — avanzado:
• Morphing: imagen de miniatura a portada grande
• Persistencia: scroll, formularios, etc.
• Duración y easing personalizados
4
Step 4: Caso práctico: transición fluida de listado a detalle
Caso completo:

Escenario:
• En la home hay un artículo titulado Tutorial de Astro
• Al hacer clic vas al detalle

Salto tradicional:
• Desaparece la home → blanco → aparece el detalle

Con View Transitions:
• El navegador reconoce el mismo título en ambas páginas
• Lo mueve suavemente de la lista a la cabecera
• El resto hace fade in/out

Pasos:
1. <ViewTransitions /> en el head del Layout
2. transition:name en el título (p. ej. transition:name="article-title")
3. Opcional: transition:animate="slide"
4. Probar en varios navegadores y dispositivos

Resultado:
• Nav sin parpadeos
• Morphing del título
• Transición suave de imágenes
• UX tipo app en lugar de salto brusco
5
Step 5: Problemas frecuentes y mejores prácticas
Problemas: 1) Animación inactiva (comprueba soporte del navegador y errores en consola). 2) Morphing poco natural (mismos transition:name y estructura similar). 3) Rendimiento (API nativa y ligera; evita animar demasiados elementos). Mejores prácticas: empieza con <ViewTransitions /> y el efecto por defecto; identifica qué te impresiona (nav estable, morphing del título); personaliza con transition:animate y transition:name; prueba en escenarios reales. Compatibilidad: más del 85 % de soporte; Astro degrada en navegadores antiguos sin romper la funcionalidad.

FAQ

¿Qué es la View Transitions API? ¿Por qué funciona tan bien?

La View Transitions API es una función nativa del navegador: le indicas que vas a cambiar el contenido, captura dos instantáneas (página antigua y nueva) y genera una animación suave entre ambas.

Las animaciones las crea el navegador; no hace falta CSS complejo ni librerías como GSAP o Framer Motion.

Ejemplo: en la home hay un artículo titulado Tutorial de Astro; al hacer clic vas al detalle.
• Salto clásico: home desaparece → blanco → detalle
• Con View Transitions: el navegador reconoce el mismo título en ambas páginas
• Lo mueve de la lista a la cabecera mientras el resto hace fade in/out

¿Cuál es el soporte en navegadores en 2025? ¿Puedo usarla con tranquilidad?

Más del 85 % de soporte en 2025:
• Chrome 111+: transiciones en el mismo documento
• Chrome 126+: transiciones entre documentos (lo usado en Astro)
• Safari: compatible
• Edge: soporte completo basado en Chromium
• Firefox 144+: compatible (Interop 2025)

React integró View Transitions en el core en 2025 (react@canary), señal de estándar en frontend.

¿El 15 % sin soporte? Astro degrada a navegación normal: funcionalidad intacta, solo sin animación. Mejora progresiva.

¿Por qué lograr efecto SPA sin React/Vue?

Un SPA tradicional para transiciones necesita:
• Una sola página con rutas en JavaScript
• Bundle más grande y carga inicial más lenta
• SEO tratado aparte

Astro + View Transitions:
• MPA con HTML independiente, SEO natural
• Carga bajo demanda de JS y CSS
• API nativa, sobrecarga mínima
• Degradación automática sin romper nada

En pruebas: React SPA 300 KB+, Astro ~50 KB; con View Transitions el tamaño casi no cambia.

¿Cómo activar View Transitions en Astro? ¿Cuántos métodos hay?

Método 1 — más simple:
• <ViewTransitions /> en el head del Layout
• 2 líneas de código, transición suave al instante
• Sin React, Vue ni librerías

Método 2 — personalizar:
• transition:animate: fade, slide, none
• transition:name para el mismo elemento entre páginas
• Título moviéndose de lista a cabecera del detalle

Método 3 — avanzado:
• Morphing de imágenes (miniatura a portada grande)
• Persistencia de scroll, formularios, etc.
• Duración y easing personalizados

¿Cómo lograr transición fluida de listado a detalle?

Caso: artículo Tutorial de Astro en home → clic → detalle.
• Clásico: home → blanco → detalle
• Con View Transitions: mismo título reconocido en ambas páginas, morphing a la cabecera, resto con fade

Pasos:
1) <ViewTransitions /> en el head del Layout
2) transition:name en el título (p. ej. transition:name="article-title")
3) Opcional: transition:animate="slide"
4) Probar en varios navegadores y dispositivos

Resultado: nav estable, morphing del título, imágenes suaves, UX tipo app.

¿Problemas frecuentes y mejores prácticas con View Transitions?

Problemas:
1) Animación inactiva: comprueba soporte y consola
2) Morphing poco natural: mismos transition:name y estructura similar
3) Rendimiento: API nativa y ligera; anima solo elementos clave

Mejores prácticas:
• Empieza con <ViewTransitions /> y el efecto por defecto
• Identifica qué te impresiona (nav, morphing del título)
• Personaliza con transition:animate y transition:name
• Prueba en escenarios reales

Compatibilidad: más del 85 % de soporte; Astro degrada en navegadores antiguos. Detección manual: if (document.startViewTransition).

14 min de lectura · Publicado el: 2 dic 2025 · Actualizado el: 21 ago 2026

Easton

Tecnología

¿Qué es la View Transitions API? ¿Por qué funciona tan bien?

La «magia» nativa del navegador — sin librerías

¿Por qué lograr efecto SPA sin React/Vue?

Soporte en navegadores en 2025: ya puedes usarla con tranquilidad

3 formas de activar View Transitions en Astro

Método 1: activación global (recomendado, 2 líneas)

Método 2: activación selectiva (solo en páginas concretas)

Método 3: probar rápido (sin tocar tu código)

3 señales de que funciona

Personalizar animaciones — que encajen con tu marca

Técnica 1: transition:animate para cambiar el tipo

Técnica 2: transition:name para «morphing»

Técnica 3: transition:persist para mantener estado

Técnica 4: control global de animaciones

Caso práctico: transición completa en un blog

Escenario

Paso 1: activar View Transitions en el Layout

Paso 2: listado — transition:name en título y portada

Paso 3: detalle — mismos transition:name

Paso 4: CSS para transiciones más fluidas

Paso 5: probar

Opcional: estado de carga

Técnicas avanzadas y problemas frecuentes

Técnica avanzada 1: respetar «reducir movimiento»

Técnica avanzada 2: ciclo de vida de scripts

Técnica avanzada 3: optimizar rendimiento

Problema 1: la animación no funciona

Problema 2: parpadeos o saltos

Problema 3: dirección incorrecta al volver atrás

Problema 4: conflictos con scripts de terceros

Compatibilidad y mejora progresiva

Conclusión

Configuración completa de Astro View Transitions

Step 1: Entender la View Transitions API y el soporte en navegadores

Step 2: Ventajas de Astro + View Transitions

Step 3: 3 formas de activación: de lo simple a lo avanzado

Step 4: Caso práctico: transición fluida de listado a detalle

Step 5: Problemas frecuentes y mejores prácticas

FAQ

Guía de Astro

Guía completa de optimización de rendimiento en Astro: 8 técnicas prácticas para pasar de 60 a Lighthouse perfecto

Guía completa de SSR en Astro: activa el renderizado en servidor en 3 pasos

Artículos relacionados

¿Qué es Astro? Entiende en 3 minutos cero JS, arquitectura Islands y contenido primero

Crea un blog con Astro desde cero: guía completa de la home al despliegue en 1 hora

Comentarios