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.

A Nuestro generador crea el bloque @keyframes completo, no solo un disparador de hover. Deberás envolver la animación exportada manualmente dentro de una pseudoclase :hover. Por ejemplo, copia la clase .my-element, renómbrala a .my-element:hover y pega tu código de animación allí. La vista previa en vivo solo muestra la animación al cargar, así que prueba el efecto hover en tu propio editor. Funciona muy bien para demostraciones educativas donde los estudiantes inspeccionan el CSS directamente.

A Para nada, no. Las animaciones CSS corren en la GPU en lugar del hilo principal del navegador, así que son mucho más eficientes que las alternativas con JavaScript. Un bloque @keyframes con 5 fotogramas suma unos 200 bytes a tu archivo. Compáralo con un plugin jQuery de 5KB que haga lo mismo. Necesitarías docenas de animaciones complejas ejecutándose al mismo tiempo para notar un golpe de rendimiento. Para la mayoría de proyectos, el impacto es mínimo. Un consejo práctico: evita animar propiedades como box-shadow o filter en dispositivos móviles — siguen provocando repintados costosos.

A Las animaciones entrecortadas casi siempre vienen de animar propiedades incorrectas. Quédate con transform y opacity — esas usan la GPU y se mantienen suaves a 60fps. Animar width, height o margin obliga al navegador a recalcular el diseño en cada fotograma, y eso traba. Nuestra herramienta solo genera transform y opacity por defecto justo por eso. Prueba rápida: abre la pestaña Performance en DevTools, graba unos segundos y busca barras moradas de Layout — esas matan la fluidez.