¿Qué es Generador de animaciones CSS?

Crea animaciones CSS con keyframes de forma visual, sin escribir codigo a mano. Configura keyframes, elige funciones de temporizado, ajusta duracion y retrasos, y copia el CSS directamente en tu proyecto. Funciona muy bien para botones, indicadores de carga, efectos hover y transiciones de pagina.

Elige entre una biblioteca de más de cuarenta animaciones listas, agrupadas en Desvanecido, Deslizar, Zoom, Rotar, Rebote, Atención, Salida y Cargadores, o construye las tuyas desde cero. Cada keyframe permite ajustar opacidad, escala, rotación, translate X e Y, sesgo X e Y, desenfoque, radio del borde, sombra y color de fondo. ¿Ya tienes un bloque @keyframes? Pégalo en el diálogo de importación y el editor visual reconstruirá cada paso. Pausa la previsualización y arrastra el cursor rojo para inspeccionar cualquier fotograma intermedio; la salida es CSS @keyframes plano, listo para pegar en cualquier hoja de estilos.

Cómo usar

1. Elige un preset de animacion (desvanecimiento, deslizamiento, rebote, rotacion) o comienza desde cero anadiendo keyframes en la linea de tiempo.
2. Ajusta las propiedades en cada keyframe (transform, opacidad, color, escala) y afina la curva de aceleracion, la duracion y el numero de iteraciones.
3. Previsualiza la animacion en tiempo real, luego copia el codigo CSS @keyframes generado o descargalo como archivo .css.

Cuándo usar

• Añadir animaciones de entrada a hero, modales o tarjetas al cargar la página.
• Diseñar microinteracciones para botones, como un ligero escalado al hover o un shake al fallar un formulario.
• Prototipar spinners y estados skeleton antes de integrarlos en el framework.

Resultado

Un desarrollador frontend necesita una animacion de entrada fluida para las tarjetas de un portafolio. Configura una animacion ease-out de 0.6s que aparece en desvanecimiento desde 20px mas abajo, copia el CSS y lo aplica con un retraso escalonado por tarjeta.

Preguntas frecuentes

¿Qué diferencia hay entre animaciones y transiciones en CSS?

Las transitions van del estado A al B una vez al activarse un trigger (hover, focus, cambio de clase). Las animations siguen una regla @keyframes con todos los pasos intermedios que quieras, pueden hacer loop y arrancan al cargar la página sin interacción del usuario.

¿Por qué mi animación se reproduce una vez y luego desaparece?

El elemento vuelve a sus estilos base al terminar la animación. Pon animation-fill-mode en forwards para que los valores del último keyframe se queden, o en both si además necesitas que el primer keyframe se aplique durante el delay.

¿Qué easing elijo para que se sienta natural?

Para entradas, ease-out frena al final y la animación se siente asentada. Para salidas, ease-in hace lo contrario. cubic-bezier(0.34, 1.56, 0.64, 1) da un ligero rebote que resulta divertido sin pasarse de simpático.

¿Funcionarán estas animaciones en navegadores viejos?

@keyframes es compatible con todos los navegadores publicados después de 2013, sin prefijos de proveedor. Si quieres soportar IE 10 o anterior necesitas el prefijo -webkit-, pero ese uso está hoy muy por debajo del umbral que justifica CSS adicional.

¿Cómo hago que la animación se repita para siempre?

Pon iteration-count en infinite y combínalo con direction: alternate; así cada ciclo invierte la animación y obtienes un vaivén suave (ideal para pulse o shake) en lugar de un salto brusco al inicio.

Herramientas relacionadas