Generador de Animación CSS

Genera animaciones de fotogramas clave CSS visualmente. Elige tipo de animación, duración, easing e iteraciones — obtén código CSS listo para copiar.

Animation preset:

Duration (s)

Delay (s)

Easing

Iterations

Direction

Fill Mode

Preview

Generated CSS

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animated-element {
  animation-name: fadeIn;
  animation-duration: 0.6s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

/* Shorthand */
.animated-element {
  animation: fadeIn 0.6s ease 0s 1 both;
}

Cómo usar Generador de Animación CSS

1Selecciona un valor preestablecido de animación (desvanecimiento, deslizamiento, rebote, giro, etc.).
2Ajusta la duración, el retraso, el easing y el número de iteraciones.
3Previsualiza la animación en vivo en el navegador.
4Copia los fotogramas clave CSS generados y la propiedad de animación.

ZenovayAnalytics

Descubre qué hacen de verdad tus visitantes.

Seguimiento de visitantes en tiempo real
Privacidad primero, sin aviso de cookies
Configurado en dos minutos

Descubre Zenovay

Herramientas relacionadas

Generador de Degradados CSS

Crea hermosos degradados CSS con un editor visual. Degradados lineales, radiales y cónicos.

Generador de Sombra de Caja CSS

Diseña sombras de caja CSS con controles visuales. Ajusta desplazamiento, desenfoque, expansión y color.

Generador de Borde Redondeado CSS

Crea valores de borde redondeado personalizados con controles visuales. Vincula o desvincula las esquinas para ajustes rápidos.

Área de Juego CSS Flexbox

Aprende y genera diseños CSS Flexbox visualmente. Ajusta dirección, alineación, envoltura y espaciado en tiempo real.

Preguntas frecuentes

¿Cuál es la diferencia entre las transiciones y las animaciones CSS?▾

Las transiciones CSS animan un cambio de propiedad entre dos estados activados por un evento (hover, focus, cambio de clase): transition: opacity 0.3s ease. Las animaciones CSS usan @keyframes para definir secuencias de varios pasos que se ejecutan automáticamente: animation: fadeIn 1s ease forwards. Las transiciones son más simples para efectos hover; las animaciones son mejores para efectos continuos (indicadores de carga), efectos de entrada o secuencias de varios pasos que se ejecutan sin interacción del usuario.

¿Qué son las funciones de aceleración (easing)?▾

Las funciones de aceleración controlan cómo progresa una animación con el tiempo. Lineal: velocidad constante. Ease: inicio lento, medio más rápido, final lento (predeterminado). Ease-in: inicio lento, final rápido. Ease-out: inicio rápido, final lento (bueno para animaciones de salida). Ease-in-out: lento en ambos extremos. cubic-bezier(x1, y1, x2, y2): curva personalizada. steps(n): pasos discontinuos (bueno para animaciones de sprites).

¿Qué hace animation-fill-mode?▾

animation-fill-mode controla qué estilos se aplican cuando la animación no está reproduciéndose: none (predeterminado) — no se aplican estilos de los fotogramas clave antes/después. forwards — los estilos del fotograma clave final permanecen después de que la animación termina. backwards — los estilos del fotograma clave inicial se aplican durante el período de retraso. both — combina forwards y backwards. Para animaciones de entrada (como fadeIn), use fill-mode: both para evitar que el elemento parpadee en su estado previo a la animación.

¿Cómo activo animaciones al desplazarse?▾

Solo CSS: use la propiedad animation-play-state. Añada una clase con animation-play-state: running mediante JavaScript cuando el elemento entre en la vista usando IntersectionObserver. CSS moderno: la API @scroll-timeline y animation-timeline: scroll() permite animaciones CSS puras impulsadas por el desplazamiento en Chrome 115+. Un enfoque sencillo: añada una clase "animate" con JavaScript cuando el elemento entre en la vista, luego defina las animaciones CSS en esa clase.

¿Debo usar animaciones CSS o JavaScript?▾

Las animaciones CSS son preferibles para animaciones simples y discretas — se ejecutan en el hilo compositor y evitan el diseño/pintado donde es posible. JavaScript (Web Animations API, GSAP, Framer Motion) es mejor para: secuencias complejas, animaciones interactivas, movimiento basado en física y animaciones que dependen de valores en tiempo de ejecución. La Web Animations API le da control JavaScript sobre las animaciones CSS: element.animate([...keyframes], { duration: 300 }). GSAP es el estándar de facto para animaciones complejas.