jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis View Transition Builder

Generate View Transitions API CSS and JavaScript for smooth page and element transitions. Same-document (SPA) and cross-document (MPA) support with reduced-motion fallback.

Cargando herramienta...

Qué es View Transition Builder?

La API de View Transitions crea transiciones animadas suaves al navegar entre páginas o actualizar contenido. El navegador captura capturas de pantalla de los estados antiguo y nuevo, luego hace una transición gradual entre ellos. Puede asignar view-transition-name a elementos específicos para animarlos de forma independiente durante la transición.

Respuesta rápida

Use la API de View Transitions para animaciones suaves de página y elementos. Para SPA: document.startViewTransition(() => updateDOM()). Para MPA: agregue <meta name="view-transition" content="same-origin"> al head. Asigne view-transition-name a elementos para animación independiente.

Last updated: 2026-05-28

Limitaciones

  • Las transiciones entre documentos (MPA) solo funcionan entre páginas del mismo origen.
  • El navegador captura capturas de pantalla estáticas. El contenido en vivo como videos puede aparecer congelado durante la transición.
  • View Transitions son Baseline 2025: Chrome 111+, Edge 111+, Safari 18.2+. Firefox está en desarrollo.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Elija el tipo de transición: mismo documento (para actualizaciones de contenido SPA) o entre documentos (para navegación MPA).
  2. Establezca la duración de la animación, la curva de easing y el view-transition-name para elementos que deben animarse independientemente.
  3. Opcionalmente personalice los pseudo-elementos ::view-transition-new y ::view-transition-old.
  4. Copie el CSS y JavaScript/meta tag. Active el fallback prefers-reduced-motion para accesibilidad.

Para qué puedes usarla

  • Animar una imagen principal entre una página de listado y una de detalle usando el mismo view-transition-name en ambas.
  • Agregar una transición suave al navegar entre páginas en un sitio estático añadiendo la meta tag view-transition.
  • Animar un filtro de galería llamando a startViewTransition() antes de actualizar la cuadrícula de imágenes.

Casos de uso

Ejemplos prácticos

Ejemplo

Transformación de imagen principal entre páginas

Un blog tiene una imagen principal en la página de listado y una versión más grande en la página del artículo. Asigne a ambas el mismo view-transition-name: hero-image. El navegador anima la imagen desde su posición en el listado hasta la posición del artículo.

Ejemplo

Intercambio de contenido SPA

Un panel filtra una tabla de datos. Envuelva la actualización del filtro en document.startViewTransition(() => updateTable()). Las filas antiguas se desvanecen mientras las nuevas aparecen.

Errores comunes

  • Dar a dos elementos el mismo view-transition-name en la misma página — los nombres deben ser únicos por página.
  • Olvidar la meta tag en el head de la página para transiciones MPA.
  • No manejar prefers-reduced-motion — los usuarios con sensibilidad al movimiento deben obtener transiciones instantáneas.

Verificación

  1. Pruebe la transición navegando entre páginas o activando la actualización de contenido y observando la animación.
  2. Verifique que prefers-reduced-motion: reduce desactive la transición y muestre un intercambio de contenido instantáneo.

FAQ

Preguntas sobre View Transition Builder

¿Puedo animar elementos específicos en lugar de toda la página?

Sí. Asigne view-transition-name a elementos individuales. Cada elemento nombrado obtiene sus propios pseudo-elementos ::view-transition-old() y ::view-transition-new() que puede animar independientemente.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también