Generador de CSS View Transition
Simule animaciones de 'View Transition API' y CSS
(::view-transition-old/new) directamente en su navegador.
Elija un Preajuste
Vista Previa
Configuración del Generador
※ Punto final (To) para ::view-transition-old (el estado que sale)
※ Punto de inicio (From) para ::view-transition-new (el estado que entra)
Código Generado
También te puede interesar
Resumen del Generador de CSS View Transition
El Generador de CSS View Transition es una herramienta gratuita y fácil de usar para desarrolladores que le permite construir y previsualizar animaciones de transición de página fluidas utilizando la API de View Transition de próxima generación directamente en su navegador.
Tradicionalmente, lograr transiciones fluidas requería bibliotecas JavaScript complejas. Ahora, puede lograrlo fácilmente con características nativas del navegador y CSS. Puede ajustar animaciones (trasladar, escalar, rotar, desvanecer) tanto para elementos que salen como para los que entran, y copiar el código al instante.
Todo el procesamiento ocurre en su navegador. Sus configuraciones nunca se envían a servidores externos, garantizando privacidad y seguridad.
Cómo Crear Animaciones de Transición
Elija un Ajuste Preestablecido o Configuración Básica
Seleccione un ajuste preestablecido como 'Fade' o 'Slide Left' en la parte superior, o ingrese un 'view-transition-name' para definir su estado base.
Previsualice y Ajuste las Animaciones
Haga clic en el botón 'Reproducir / Cambiar Estado' para ver la transición real. Ajuste los parámetros en las pestañas de animación 'Old' (salida) y 'New' (entrada).
Copie y Aplique el Código
Copie el código generado desde las pestañas 'CSS', 'JavaScript' y 'HTML' respectivamente, e intégrelos en su proyecto.
Glosario de View Transition
- View Transition API
- Un mecanismo donde el navegador captura automáticamente capturas de pantalla del DOM antes (estado antiguo) y después (estado nuevo) de un cambio, animando suavemente entre ellos.
- view-transition-name
- Una propiedad CSS para identificar los elementos a animar. Los elementos con el mismo nombre en el DOM antiguo y nuevo se vinculan y animan juntos.
- ::view-transition-old / new
- `old` es un pseudo-elemento que contiene la captura del "estado antiguo" antes de la transición, controlando el efecto de salida. `new` es para el "estado nuevo", controlando la entrada.
- Cross-document View Transitions
- Una extensión de la especificación que permite animar transiciones de pantalla entre MPAs simplemente especificando metaetiquetas, más allá de las SPAs.
Preguntas Frecuentes (FAQ)
- Q.¿Se envían mis datos a un servidor?
- No, esta herramienta funciona completamente en su navegador. Ninguno de sus datos o configuraciones se envía a servidores externos. Funciona de forma segura incluso sin conexión.
- Q.¿La animación de View Transition funcionará en todos los navegadores?
- Es compatible con Chrome 111+, Edge 111+, Safari 18+, etc. Para navegadores no compatibles como Firefox, recurre de forma segura a un cambio de página instantáneo regular (mejora progresiva) sin romper su sitio.
- Q.¿Puedo usarlo para MPAs (Aplicaciones de Múltiples Páginas)?
- Sí, puede usarlo para MPAs en el mismo origen. Al agregar `<meta name="view-transition" content="same-origin" />` al `<head>` de su HTML y asignar un `view-transition-name` a los elementos mediante CSS, puede implementar animaciones sin escribir JavaScript.
- Q.¿Qué debo usar para view-transition-name?
- Especifique cualquier cadena que sea completamente única dentro de la página. Si el mismo nombre existe en múltiples elementos en el DOM simultáneamente, la animación fallará. Se recomienda incluir identificadores únicos para listas.
Casos de Uso
Aquí hay ejemplos típicos de implementación usando la API de View Transition.
Detalles del Producto en E-Commerce
Al hacer clic en una miniatura, la imagen se expande sin problemas a la página de detalles del producto.
Flujos de UI tipo App Nativa
Puede lograr animaciones ligeras estilo app nativa directamente en el navegador, como pantallas deslizándose en respuesta a clics. Perfecto para PWAs.
Cambio a Modo Oscuro
En lugar de que la pantalla se vuelva oscura instantáneamente, puede agregar efectos únicos, como un círculo de color expandiéndose.
Ordenación y Filtrado de Listas
Al filtrar una lista, los elementos eliminados pueden desvanecerse mientras que los restantes se deslizan suavemente a sus nuevas posiciones.
Enviar comentarios
Déjenos saber su opinión para ayudarnos a mejorar la herramienta.
Los comentarios están temporalmente suspendidos
El servidor está ocupado o la protección contra spam está activa. Inténtelo más tarde.