Herramientas Dev
Generador de animaciones CSS
Elige un preset, ajusta velocidad y tiempo — obtén @keyframes CSS listo para pegar.
Qué hace Generador de animaciones CSS?
El generador de animaciones CSS construye animaciones @keyframes con vista previa en vivo: elige un preset (fade, slide, bounce y más), ajusta parámetros y obtén código CSS listo para pegar.
Cómo usar Generador de animaciones CSS?
- Selecciona un preset de animación de la lista.
- Ajusta duración, retardo, iteraciones, temporización y dirección.
- Haz clic en Reproducir para la vista previa y copia el código CSS.
Características principales
- 6 presets: fade, slide-up, slide-down, bounce, spin, pulse, shake
- Control de duración, retardo, iteraciones, temporización y dirección
- Vista previa en vivo con código CSS listo para pegar
Preguntas frecuentes
¿Puedo usar el código en cualquier navegador?
Las animaciones CSS son compatibles con todos los navegadores modernos. No se necesita prefijo.
¿Cómo aplico la animación a un elemento específico?
Copia el código @keyframes y aplica la propiedad animation al elemento deseado en tu CSS.
¿Es gratuita esta herramienta?
Sí, esta herramienta es completamente gratuita y no requiere registro.
¿Se guardan mis datos?
No. Todos los cálculos se realizan solo en tu navegador — no se envía información a ningún servidor.