Generador Animación CSS Gratis: Crear Animaciones Visual Online

A Elige un preset o configura manualmente la duración, delay, iteraciones y timing function. La vista previa muestra la animación en vivo.

A Controla la velocidad de la animación: linear (constante), ease (suave), ease-in (empieza lento), ease-out (termina lento), ease-in-out (ambos).

A Sí, se genera tanto la regla @keyframes como la propiedad animation completa.

A Absolutamente. Simplemente busque el control deslizante de 'Duración' en el generador. Arrastrarlo hacia la izquierda disminuye el tiempo, haciendo la animación más rápida. Arrastrarlo hacia la derecha lo aumenta. Verá la vista previa en vivo actualizarse al instante, mostrándole exactamente cómo se ve una animación de 1.5 segundos en comparación con una de 0.5 segundos. Esto le permite ajustar el tiempo sobre la marcha.

A Sí, pero con una diferencia importante. Nuestra herramienta genera animaciones CSS que se ejecutan al cargar la página o mediante una clase CSS. Para efectos hover, debes envolver la animación generada en una pseudoclase `:hover` tú mismo — aún no tenemos un interruptor dedicado. Las animaciones por scroll requieren JavaScript (como Intersection Observer) para añadir la clase cuando el elemento entra en vista. El generador te da la animación base; tú controlas cuándo se activa. Un consejo práctico: exporta el código, ponlo en estado `paused` por defecto, y usa JS para reanudarlo al hacer scroll.