Tus datos nunca se envían a ningún servidor
Listo para usar inmediatamente sin crear cuenta
Verifica las animaciones de transición en tiempo real
* Valores objetivo (To) para el elemento saliente `::view-transition-old`
* Valores iniciales (From) para el elemento entrante `::view-transition-new`
🔗 Herramientas Relacionadas
📖 Acerca de esta herramienta
El Generador de Transiciones de Vista CSS (View Transition Generator) es una herramienta gratuita para desarrolladores que permite construir visualmente animaciones fluidas de transición de páginas usando la API de View Transition.
Puedes lograr transiciones perfectas utilizando solo funciones nativas del navegador, eliminando la necesidad de bibliotecas de animación complejas que suelen utilizarse en Single Page Applications (SPA). Ajusta las animaciones pseudo-elemento de salida (estado antiguo) y de entrada (estado nuevo), y copia el código CSS y JavaScript listo para usar.
Esta herramienta funciona completamente en tu navegador (lado del cliente). Los datos ingresados nunca se envían a ningún servidor, garantizando seguridad y privacidad.
🔰 Cómo usar
1. Selecciona un Preajuste o Configuración Base
Primero, selecciona un preajuste como "Fade" o "Slide", o introduce un view-transition-name para definir el estado base.
2. Previsualiza y Ajusta
Haz clic en el botón "Reproducir / Cambiar Estado" para ver la transición real en la pantalla de prueba. Cambia entre las pestañas "Antiguo" y "Nuevo" para ajustar parámetros de animación (como opacidad o escala) y crear un efecto perfecto.
3. Copia el Código
Copia el código generado en las pestañas CSS, JavaScript o HTML e intégralo en tu proyecto (soporta tanto SPA como MPA).
📚 Glosario
- View Transition API
- Un mecanismo nativo en el que el navegador automáticamente captura capturas de pantalla del DOM (antes y después) y anima la transición entre ambos estados sin problemas.
- view-transition-name
- Una propiedad CSS para identificar elementos objetivo en la transición. Los elementos con el mismo nombre entre el DOM antiguo y el nuevo se animan de forma conjunta.
- ::view-transition-old
- Un pseudo-elemento que contiene la captura del "estado antiguo" (antes de la transición). Animar este pseudo-elemento controla el efecto de salida.
- ::view-transition-new
- Un pseudo-elemento que contiene la captura del "estado nuevo" (vista actual). Animar este controla el efecto de entrada.
- Cross-document View Transitions
- Especificación extendida que permite animar transiciones de páginas entre varias páginas HTML estándar (MPA) usando simplemente etiquetas meta y CSS.
⚙️ Detalles Técnicos
La API View Transition se activa en el instante en el que los desarrolladores actualizan el DOM, instruyendo al motor del navegador para manipular el árbol.
1. Fase de Captura
Al llamar a document.startViewTransition(), el navegador pausa la visualización y captura el estado actual (estado antiguo).
2. Actualización del DOM
Una vez actualizado el DOM en el callback, el navegador captura el nuevo estado del DOM (estado nuevo).
3. Árbol de Pseudo-elementos
Un árbol especial de pseudo-elementos (::view-transition...) se anexa temporalmente al DOM actual. Por defecto, un desvanecimiento cruzado (cross-fade) se reproduce entre la captura antigua y la nueva. El código generado por esta herramienta sobrescribe ese encadenado por defecto y aplica animaciones personalizadas avanzadas.
❓ Preguntas Frecuentes
- P. ¿Se envían mis datos a un servidor?
- R. No. Esta herramienta opera completamente dentro de tu navegador, tus datos nunca salen de tu ordenador.
- P. ¿Puedo usarlo en mi teléfono móvil?
- R. Sí, funciona perfectamente en entornos móviles y tabletas.
- P. ¿Funciona View Transition en todos los navegadores?
- R. Es soportado por Chrome 111, Edge 111, y Safari 18 en adelante. En navegadores no compatibles, simplemente no ocurrirá la animación ni habrá errores: el cambio de pantalla será inmediato.
- P. ¿Puedo usarlo en un sitio web clásico que no sea SPA?
- R. Sí. Para aplicaciones multipágina convencionales (MPA) en el mismo origen, puedes lograr animaciones de transición introduciendo una etiqueta
<meta name="view-transition" content="same-origin" />en el HTML y utilizando CSS. - P. ¿Qué debo colocar en `view-transition-name`?
- R. Ajusta esta propiedad a cualquier nombre único en tu página (ej. `hero-image`). ¡Cuidado! Si múltiples elementos en la misma pantalla tienen el mismo nombre, la transición fallará inmediatamente.
- P. ¿Necesito JavaScript obligatoriamente para crear transiciones?
- R. En una navegación entre páginas tradicionales (MPA mismo origen), puedes lograr todo solo con CSS y etiquetas Meta de HTML, sin tener que escribir JavaScript.
💡 Casos de Uso
Detalles de Tienda (E-commerce)
Al tocar una miniatura de un producto en la lista, la imagen se amplía suavemente transformándose sin interrupciones en la gran imagen principal del artículo.
Flujos Tipo App Nativa
Al confirmar una acción o hacer clic en un enlace, la pantalla se desplaza lateralmente tal como ocurre en la navegación estándar de una App de iOS o Android.
Alternar Modo Oscuro
En lugar de cambiar de luz a oscuridad de un impacto drástico general, un efecto circular surge desde un botón tapando dinámicamente el sitio y revelando la nueva modalidad.
Filtrado y Orden de Listas
Al reducir el listado por categoría, los objetos excluidos de desvanecen grácilmente, y los elementos remanentes deslizan hasta sus lugares finales de un modo elegante.
- Generador de CSS Box-Shadow｜Multicapa y Presets
- Generador CSS Clip-Path｜Editor Visual con Presets
- Generador de Animaciones CSS｜Salida de código @keyframes
- Generador de Gradientes CSS｜Lineal, radial y cónico con patrones CSS
- Generador de Animación Sprite CSS｜Código steps() Automático
- Generador Animación Scroll CSS | Efectos sin JavaScript
- Generador CSS Clamp() | Cálculo de Tipografía Fluida Responsiva
- Generador CSS de Fondos SVG | Convertidor Data URI y Optimizador
- Generador Animaciones de Texto CSS | Efectos Reveal Copy-Paste
- Generador Container Queries CSS | Crea Reglas @container Visualmente
- Generador de Animaciones CSS @property | Anima Propiedades Personalizadas
- Generador de Filtros y Mezclas CSS | Editor Visual de Efectos
- Generador de Diseño CSS — Constructor Visual de Grid y Flexbox