Generador de animaciones CSS @keyframes con vista previa

Genera una animación CSS @keyframes (fundido, deslizamiento, rebote…) con vista previa y código.

Durations

▸CSS

@keyframes pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.element {
  animation: pulse 1s ease-in-out infinite;
}

🔒 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.