Generador de animaciones CSS @keyframes con vista previa
Genera una animación CSS @keyframes (fundido, deslizamiento, rebote…) con vista previa y código.
🔒 100 % en el cliente — no se envía ningún dato
Crea animaciones CSS @keyframes y copia código listo para usar con una vista previa en directo. Ajusta los pasos, la duración y el timing sin escribir nada a mano. La herramienta funciona por completo en tu navegador, sin enviar datos a ninguna parte.
What is it for?
- ▸ Prototipar la animación de un botón o un icono
- ▸ Generar código @keyframes sin memorizarlo
- ▸ Previsualizar una animación antes de integrarla
- ▸ Ajustar con precisión la duración y el easing en tiempo real
FAQ
¿Puedo copiar el CSS generado?
Sí, el código completo de @keyframes está listo para pegar.
¿La vista previa es en directo?
Sí, cada cambio actualiza la animación al instante.
¿Puedo elegir la función de timing?
Sí, define la duración, el easing y las repeticiones.
Related tools
Relación de aspecto · calculadora Calcula una relación de aspecto (16:9…) y deriva una dimensión proporcional que falte. Generador de códigos de barras Genera un código de barras (EAN-13, Code128, UPC) a partir de un valor, descargable, en tu navegador. Base64 → imagen Decodifica un data URI o Base64 en una imagen visualizable y descargable, en tu navegador. CSS border-radius · generador Crea esquinas redondeadas en CSS (border-radius) con vista previa en vivo y código listo para copiar. CSS box-shadow · generador Genera una sombra CSS box-shadow con vista previa en vivo y código listo para copiar. Eliminar croma (pantalla verde) Haz transparente un color de fondo (pantalla verde/azul) y exporta un PNG, en tu navegador.