Generador de animaciones CSS

Crea animaciones @keyframes de forma visual. Elige un ajuste predefinido o define paradas de fotograma clave, ajusta duración/retardo/temporización/dirección, previsualiza en vivo y copia el CSS/SCSS/Tailwind.

Sí. Selecciona cubic-bezier (personalizado) y aparecerá un editor visual de curvas con campos x1/y1/x2/y2. El valor resultante se aplica tanto a la vista previa en vivo como al código generado.

Emite un fragmento de tailwind.config.js que extiende theme.keyframes/animation para las utilidades animate-<nombre>. El CSS @keyframes en bruto se incluye como alternativa.

Sí, el CSS Animation Generator es 100% gratis, sin registro, sin tarifas ocultas y sin límites de uso. Todo el procesamiento se realiza localmente en tu navegador, garantizando una privacidad total.

Por supuesto. El CSS Animation Generator procesa todo en el lado del cliente, dentro de tu navegador. No se sube ni se almacena ningún dato en ningún servidor. Tu contenido permanece privado en tu dispositivo en todo momento.

Sí, el CSS Animation Generator es totalmente adaptable y funciona en smartphones y tablets. Puedes usarlo en cualquier dispositivo con un navegador web moderno, sin necesidad de descargar ninguna app.

No se necesita ninguna cuenta ni registro. Simplemente abre el CSS Animation Generator en tu navegador y empieza a usarlo de inmediato. No hay muros de registro ni restricciones de uso.

El CSS Animation Generator admite una amplia gama de formatos y lenguajes populares. Consulta la interfaz de la herramienta para ver la lista completa de opciones disponibles.

Solo tienes que introducir tu entrada en el campo indicado, ajustar la configuración a tu gusto y la herramienta la procesará al instante. Después puedes copiar el resultado al portapapeles o descargarlo.

El CSS Animation Generator funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. Para una mejor experiencia, usa la última versión de tu navegador preferido.

Una transición CSS anima una propiedad entre dos estados y solo se ejecuta en respuesta a un disparador, como un hover o un cambio de clase, pasando suavemente del valor antiguo al nuevo. Una animación CSS usa @keyframes para definir muchos pasos intermedios a lo largo de una línea de tiempo y puede ejecutarse por sí sola en cuanto el elemento se carga, repetirse en bucle indefinidamente, invertirse o alternar dirección. Las transiciones son ideales para cambios de estado simples y puntuales, como el cambio de color de un botón, mientras que las animaciones gestionan movimientos de varios pasos, como un rebote, un spinner o una secuencia que recorre varios porcentajes entre 0% y 100%. Este generador construye la ruta de @keyframes, permitiéndote definir cada punto, ajustar la temporización y la repetición, previsualizarlo en vivo y copiar código CSS, SCSS o Tailwind limpio.

Por defecto, una animación CSS solo aplica estilos al elemento mientras se está reproduciendo; antes de empezar y después de terminar, el elemento vuelve a sus estilos normales. La propiedad fill-mode cambia eso. "forwards" mantiene al elemento en su último fotograma clave (100%) después de que termina la animación, de modo que un fade-in permanece visible en lugar de desaparecer. "backwards" aplica el primer fotograma clave (0%) durante cualquier retraso antes de que comience la reproducción, evitando un destello del estado sin animar. "both" combina ambos, manteniendo el fotograma inicial durante el retraso y el fotograma final después, lo cual es la opción más segura para efectos de entrada. "none" desactiva todo esto. Si eliges el modo equivocado, tu elemento parpadeará en los extremos de la reproducción. El generador expone los cuatro valores, así que puedes alternar el fill mode y ver cómo reacciona la vista previa en vivo antes de copiar el código.

Configura el iteration count como "infinite" en lugar de un número fijo. El iteration count le indica al navegador cuántas veces debe reproducir los @keyframes de principio a fin; un valor de 1 se reproduce una vez, 3 se reproduce tres veces, e "infinite" se repite sin fin hasta que se elimina el elemento o se pausa la animación. Para un spinner suave e ininterrumpido también quieres una función de temporización "linear", para que cada rotación se ejecute a velocidad constante sin easing en el punto de unión del bucle, además de un único fotograma clave que rote de 0 a 360 grados. El preajuste Spin de este generador ya viene configurado así, pero puedes aplicar el mismo iteration count infinito a cualquier preajuste para crear efectos de pulso, tambaleo o respiración. Configura la iteración en infinite, elige el easing linear si necesitas un bucle sin costuras, previsualízalo y copia el resultado.

Una función de temporización cubic-bezier controla cómo acelera y desacelera una animación a lo largo de su duración, y se define mediante dos puntos de control escritos como x1, y1, x2, y2. Los valores de x deben mantenerse entre 0 y 1 porque representan el progreso a través del tiempo, mientras que los valores de y pueden ir por debajo de 0 o por encima de 1 para crear efectos de sobrepaso o anticipación, como un valor que se pasa de su objetivo antes de asentarse. El primer punto define cómo entra el movimiento al inicio; el segundo define cómo sale al final. Los easings con nombre habituales son solo preajustes: ease-in es aproximadamente cubic-bezier(0.42, 0, 1, 1), por ejemplo. El editor visual de curvas de esta herramienta te permite arrastrar o escribir los cuatro números, y redibuja la curva y la vista previa en vivo al instante, para que puedas afinar la sensación antes de copiarla.

Ese salto ocurre porque, por defecto, una animación deja de aplicar estilos al elemento en cuanto termina, así que el elemento vuelve a lo que indique su CSS base. Si tu fotograma clave del 0% establece la opacidad en 0 y el estado normal del elemento también es invisible, un fade-in terminado desaparecerá. La solución es animation-fill-mode: usa "forwards" para que el elemento mantenga su fotograma clave del 100% después de que termine la animación, o "both" para cubrir también cualquier retraso inicial. Un salto al comienzo de un bucle normalmente significa que tus fotogramas clave del 0% y del 100% no coinciden, por lo que la línea de tiempo no puede continuar sin interrupciones. El generador te ayuda a detectar ambos problemas: configura un fill mode, alinea tu primer y último punto, y usa el botón Replay para ver la transición repetidamente hasta que quede limpia antes de copiar el CSS.