Generador de Animaciones CSS con preajustes y editor visual
El Generador de Animaciones CSS te permite crear animaciones con @keyframes de forma visual, sin escribirlas a mano. Elige un preajuste listo para usar, ajusta los tiempos y el suavizado, y copia un CSS limpio y listo para producción directamente en tu hoja de estilos.
Está pensado para desarrolladores frontend y diseñadores de interfaces que buscan movimiento pulido y rápido: prototipar un efecto de entrada, experimentar con curvas de suavizado o afinar un spinner en bucle. Puedes elegir entre 35 preajustes en cuatro categorías, ajustar cada propiedad de la animación y abrir el Editor de fotogramas para dar forma a cada paso. Una vista previa en vivo reproduce tu animación mientras trabajas.
Cómo crear una animación CSS
Elige un preajuste
Selecciona una pestaña de categoría — Entrada, Salida, Énfasis o Bucle — y luego haz clic en cualquier preajuste para aplicarlo. La vista previa se reproduce al instante y cada propiedad y fotograma se actualiza para coincidir.
Ajusta las propiedades
Afina la Duración (de 0,1 s a 5 s), el Retardo (de 0 s a 5 s), el Suavizado, la Iteración (1, 2, 3 o infinite), la Dirección (normal, reverse, alternate) y el Modo de relleno (none, forwards, backwards, both).
Edita los fotogramas (opcional)
Abre el Editor de fotogramas para dar forma a cada paso. Define opacity, translateX, translateY, rotate y scale en cada porcentaje, y haz clic en Añadir fotograma para insertar un paso nuevo con valores interpolados.
Previsualiza y copia
Usa reproducir, pausar y reiniciar para revisar el movimiento, y cambia la forma de la vista previa (cuadro, círculo, texto) y el color de fondo para probarla en contexto. Cuando se vea bien, haz clic en Copiar para obtener el CSS completo.
Funciones
35 preajustes de animación
Una biblioteca de 35 preajustes en cuatro categorías: Entrada, Salida, Énfasis y Bucle, cada uno con tiempos predeterminados sensatos.
Control total de propiedades
Define duración, retardo, suavizado, número de iteraciones, dirección y modo de relleno desde un único panel de controles visuales.
9 opciones de suavizado
Usa las curvas estándar más suavizados personalizados bounce, elastic, smooth y por pasos para efectos fotograma a fotograma.
Editor visual de fotogramas
Una línea de tiempo muestra cada fotograma; haz clic en cualquier paso para editar opacity, translateX/Y, rotate y scale, y luego añade o elimina pasos.
Interpolación inteligente
Los fotogramas nuevos se rellenan automáticamente a partir de los pasos vecinos, así los fotogramas insertados quedan fluidos en lugar de saltar.
Vista previa en vivo
Mira cómo se reproduce la animación en tiempo real con controles de reproducir, pausar y reiniciar mientras cambias cualquier ajuste.
Opciones de forma y fondo
Previsualiza sobre un cuadro, círculo o elemento de texto y define un color de fondo personalizado para probar el movimiento en distintos contextos.
Código limpio
Obtén el bloque completo de @keyframes más la forma abreviada animation, actualizado en vivo, con copia al portapapeles en un clic.
Modo oscuro
Un tema oscuro integrado mantiene el editor cómodo de usar en entornos con poca luz.
Funciona en tu navegador
Todo el procesamiento es local, así que tus animaciones se quedan en tu dispositivo sin enviar nada a un servidor.
Preguntas frecuentes
¿Cómo creo una animación CSS?
Elige un preajuste de una categoría, ajusta la duración, el suavizado y otras propiedades, y luego, si quieres, abre el Editor de fotogramas para refinar cada paso. Cuando la vista previa en vivo se vea bien, haz clic en Copiar para obtener el CSS completo. No hay nada que instalar ni que registrar.
¿Qué son los keyframes de CSS y @keyframes?
Una regla @keyframes define las etapas con nombre de una animación, cada fotograma situado en un porcentaje del 0 % al 100 %. El navegador interpola entre esas etapas a lo largo de la duración de la animación. Este generador crea la regla @keyframes por ti y la aplica mediante la forma abreviada animation.
¿Qué propiedades CSS puedo animar?
El Editor de fotogramas controla opacity, translateX, translateY, rotate y scale, propiedades aceleradas por GPU en la mayoría de navegadores para un movimiento fluido. Algunos preajustes también usan transformaciones más ricas como scaleX, scaleY, skewX, skewY y rotateX, que se trasladan al código generado.
¿Qué hace el modo de relleno (fill mode)?
El modo de relleno controla cómo se ve el elemento antes y después de la animación. none lo devuelve a sus estilos originales, forwards mantiene los estilos del último fotograma, backwards aplica el primer fotograma durante el retardo y both combina ambos. Para las animaciones de entrada, forwards suele mantener el elemento visible después de aparecer.
¿Qué función de suavizado debería usar?
Usa ease-out para entradas (arranque rápido, frenado suave), ease-in para salidas (arranque suave, final rápido) y ease-in-out para énfasis y bucles. Elige linear para spinners continuos, y recurre a bounce o elastic cuando quieras una sensación juguetona que llame la atención.
¿Cómo hago una animación en bucle (infinita)?
Pon la Iteración en infinite. Los preajustes de Bucle —como Spin, Float y Wave— ya usan iteraciones infinitas, así que siguen reproduciéndose por sí solos. Combinar infinite con la dirección alternate crea un movimiento fluido de ida y vuelta.
¿Cuál es la diferencia entre una animación CSS y una transición?
Una transición anima un único cambio entre dos estados y necesita un disparador como un hover o un cambio de clase. Una animación con fotogramas puede definir muchas etapas intermedias, puede repetirse en bucle y arranca por sí sola. Esta herramienta se centra en las animaciones con @keyframes, que te dan un control más fino sobre el movimiento de varios pasos.
¿Cómo copio el CSS generado?
Haz clic en el botón Copiar del panel de código. Copia toda la salida —el bloque @keyframes más una regla .element con la forma abreviada animation— a tu portapapeles, lista para pegar en tu hoja de estilos. La salida usa propiedades estándar compatibles con todos los navegadores modernos, sin necesidad de prefijos de proveedor.
Aún no hay comentarios. ¡Sé el primero en comentar!