Generador de animaciones CSS con vista previa
Selecciona un efecto, ajusta el tiempo y la curva, y comprueba cómo se mueve el elemento de prueba. El CSS generado incluye los keyframes y una regla para respetar prefers-reduced-motion.
Espacio de trabajo · Generador de animaciones CSS
@keyframes bt-slide { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } } .elemento { animation: bt-slide 650ms ease-out 0ms 1 both; } @media (prefers-reduced-motion: reduce) { .elemento { animation: none; } }
La animación se ejecuta en un elemento de prueba. Cambia los valores para ajustarla.
Cómo se usa
Elige uno de los efectos disponibles.
Ajusta la duración, el retardo, la curva y el número de repeticiones.
Pulsa reproducir para verlo de nuevo, y copia el CSS completo.
Ejemplos
Entrada de una tarjeta
Deslizar con 650 ms y ease-out da una entrada suave sin distraer.
Indicador de carga
Un giro lineal con repetición infinita mantiene la sensación de actividad constante.
Lo que conviene saber
Las animaciones de esta herramienta usan transform y opacity, propiedades que el navegador puede animar sin recalcular el diseño en cada fotograma. Evita animar width, height, top o left en bucles continuos: son más costosas, sobre todo en móviles.
La regla @media (prefers-reduced-motion: reduce) desactiva la animación cuando el sistema operativo pide reducir el movimiento. Es una medida de accesibilidad importante para personas con sensibilidad al movimiento, no un detalle opcional.
Preguntas frecuentes
Herramientas relacionadas
Otras herramientas que pueden servirte para tareas similares.
Generador de border-radius
Ajusta las cuatro esquinas por separado y copia el CSS con vista previa.
Generador de sombras CSS
Crea sombras de caja suaves y copia la propiedad box-shadow.
Generador de degradados CSS
Diseña degradados lineales o radiales y copia el CSS.