Cómo usar Generador de animaciones CSS

La respuesta corta

Para crear una animación CSS, elige un preajuste (fade, slide, bounce, pulse, spin, shake, zoom) o edita los keyframes, ajusta duración, easing, retardo, repeticiones y dirección, previsualízala en directo y copia el CSS de @keyframes y animation.

Funciona en tu navegador. Lo que introduces no se sube.

Cómo se usa

Escribe o pega tu texto en la herramienta.

Elige las opciones que necesites.

Mira cómo el resultado se actualiza al instante.

Copia o descarga el resultado.

Límites que conviene conocer

¿Las animaciones CSS afectan al rendimiento? Animar transform y opacity es ligero porque lo gestiona la GPU; animar width, height o top obliga a recalcular el diseño.

¿Cómo respeto la preferencia de movimiento reducido? El CSS generado incluye una media query prefers-reduced-motion que desactiva la animación para quienes piden menos movimiento.