Generador de animaciones CSS

Elige un preset, ajusta el tiempo, suavizado, iteraciones y dirección, y observa la reproducción en la vista previa. Copia el @keyframes y la abreviatura de animación con un clic cuando el resultado sea correcto — todo funciona en tu navegador.

Preset

Duración1.0s

Retraso0s

Función de temporización

Dirección

Iteraciones1

Infinito

Modo de relleno

Nombre de la animación

CSS generado

Todo funciona en tu navegador. Sin subida de archivos, sin registro.

Cómo funciona

STEP 1

Elige un preset

Empieza con aparición, deslizamiento, rebote, pulso, giro o agitación. La vista previa reproduce el movimiento en el momento en que eliges, para que veas exactamente qué hace.

STEP 2

Ajusta el tiempo

Configura duración, retraso, suavizado, cuántas veces se repite y la dirección. Pulsa Repetir en cualquier momento para ver los nuevos ajustes en acción.

STEP 3

Copia el CSS

Copia el bloque @keyframes y la abreviatura de animación con un clic y pégalos en tu hoja de estilos — nada se sube.