Generador de Animaciones CSS
Crea animaciones de keyframes CSS de forma visual. Elige un preset como fade, slide, bounce, pulse, spin o shake, ajusta la duración, la función de tiempo, el retraso, el número de repeticiones y la dirección, mira una vista previa en vivo ejecutando la animación y copia el CSS completo con @keyframes y la propiedad animation.
El Generador de Animaciones CSS es una herramienta visual gratuita para crear animaciones de keyframes en CSS. Elige un preset listo como fade, slide, bounce, pulse, spin o shake y ajusta la duración, la función de tiempo, el retraso, el número de repeticiones y la dirección con controles simples. Una caja de vista previa en vivo ejecuta tu animación a medida que cambias las opciones, y la herramienta genera el bloque @keyframes completo y la forma abreviada animation para que la copies directamente en tu hoja de estilos. Todo funciona en tu navegador, sin registro.
¿Qué es un generador de animaciones CSS?
Las animaciones CSS mueven un elemento entre estilos definidos en un conjunto de @keyframes, controlados por la propiedad animation. Escribirlas a mano implica teclear los porcentajes de los keyframes y recordar el orden de los valores de la forma abreviada animation. Este generador te ofrece una biblioteca de presets de animaciones comunes y un control para cada parte de la propiedad animation, aplica el resultado a un elemento de vista previa en vivo e imprime el CSS de @keyframes y animation correspondiente para que lo copies.
Cómo usar el generador de animaciones CSS
Crear una animación toma solo unos pocos pasos:
- Elige un preset de animación como fade, bounce, pulse o spin.
- Define la duración en segundos de cuánto dura un ciclo de la animación.
- Escoge una función de tiempo como ease, linear, ease-in-out o una curva cubic-bezier.
- Agrega un retraso, un número de repeticiones o infinito y una dirección como alternate.
- Mira la vista previa en vivo y copia el CSS de @keyframes y animation generado.
¿Cómo funciona la forma abreviada animation de CSS?
La forma abreviada animation reúne varias propiedades longhand en una sola línea. En esta herramienta el orden es nombre, duración, función de tiempo, retraso, número de repeticiones y dirección. El nombre apunta al bloque @keyframes, la duración define la duración de un ciclo y la función de tiempo modela la curva de velocidad. El retraso espera antes de que la animación comience, el número de repeticiones la repite una cantidad de veces o para siempre con infinite, y la dirección controla si cada ciclo se reproduce hacia adelante, al revés o alternando.
¿Qué hacen el número de repeticiones y la dirección?
El número de repeticiones es cuántas veces se ejecuta la animación. Un número entero la reproduce esa cantidad de veces, mientras que infinite la repite para siempre, ideal para spinners y pulsaciones. La dirección decide cómo se reproduce cada ciclo: normal va hacia adelante, reverse va hacia atrás, alternate alterna entre adelante y atrás en cada ciclo, y alternate-reverse comienza hacia atrás y luego alterna. Combinar infinite con alternate es una forma común de crear un efecto suave de ida y vuelta.
¿Por qué usar este generador de animaciones CSS?
- 100 % gratis, sin anuncios, registro ni límites.
- Una biblioteca de presets que cubre fade, slide, bounce, pulse, spin, shake y más.
- Elemento de vista previa en vivo que realmente ejecuta tu animación mientras la ajustas.
- Controles para duración, función de tiempo, retraso, número de repeticiones y dirección.
- Genera el bloque @keyframes completo y la forma abreviada animation, listos para copiar.
- Funciona por completo en tu navegador, así que no se sube nada.
Preguntas frecuentes
¿El generador de animaciones CSS es gratis?
Sí. Todas las herramientas de ToolsSoup son completamente gratuitas, sin cuenta, registro ni límites ocultos.
¿El CSS de animación generado funciona en todos los navegadores?
Sí. La propiedad animation y los @keyframes son compatibles con todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge, así que el CSS que produce esta herramienta funciona sin prefijos de proveedor.
¿Cómo hago que una animación se repita para siempre?
Marca la opción Infinito en el número de repeticiones. Eso define el iteration-count como infinite en el CSS generado, así que la animación se repite sin fin, que es lo que quieres para spinners, pulsaciones e indicadores de carga.
¿Mis datos se suben a algún lugar?
No. El generador funciona por completo en tu navegador, así que nada de lo que configuras se envía ni se almacena en ningún servidor.