Animaciones

Una animación bien usada guía la atención, da retroalimentación (un botón que responde, un menú que se despliega) y hace que un sitio se sienta pulido. Mal usada, distrae y vuelve lenta la página. Estas librerías y herramientas cubren desde efectos CSS sencillos hasta animaciones complejas con scroll, Lottie y 3D.

Empieza siempre por CSS (transiciones y @keyframes): es lo más ligero. Recurre a una librería de JavaScript cuando necesites secuencias, control con el scroll o física.

Librerías CSS

Animate.cssAnimaciones listas aplicando una clase: fadeIn, bounce, slideIn…Hover.cssEfectos al pasar el mouse para botones y enlaces.AnimistaConfigura animaciones CSS visualmente y copia solo el código que usas.CSS LoadersMás de 600 loaders hechos con un solo elemento.loading.io CSSSpinners CSS puros y ligeros.

Librerías JavaScript

GSAPLa librería de animación profesional: timelines, ScrollTrigger y más (gratis).MotionAnimaciones para JavaScript, React y Vue (antes Framer Motion).Anime.jsMotor de animación ligero y versátil.AOSAnimaciones al hacer scroll con un atributo data-aos.ScrollRevealRevela elementos al entrar en pantalla.LenisDesplazamiento suave (smooth scroll) ligero.AutoAnimateAnima listas y cambios del DOM con una línea.Barba.jsTransiciones fluidas entre páginas.React SpringAnimaciones basadas en física para React.Typed.jsEfecto de texto que se escribe solo.canvas-confettiLluvia de confeti para celebrar acciones.particles.jsFondos de partículas animadas.SplittingDivide texto en letras y palabras para animarlas con CSS.

Lottie y animaciones vectoriales

LottieFilesMiles de animaciones Lottie gratuitas y reproductor web.Lottie (Airbnb)Documentación de la librería que reproduce animaciones de After Effects.RiveCrea animaciones interactivas con máquinas de estado.SVGatorAnimador de SVG sin código (plan gratuito limitado).LordiconÍconos animados en Lottie (con versión gratuita).useAnimationsMicro-animaciones de íconos para React y Lottie.

3D y efectos avanzados

Three.jsLa librería estándar para 3D en el navegador con WebGL.React Three FiberThree.js con componentes de React.SplineDiseña escenas 3D interactivas y embébelas en tu sitio.Babylon.jsMotor 3D completo para web y juegos.Vanta.jsFondos animados 3D listos (ondas, redes, niebla).Matter.jsMotor de física 2D para efectos interactivos.

Herramientas para crear animaciones CSS

cubic-bezier.comCrea y compara curvas de aceleración (easing).Easings.netCatálogo visual de funciones de easing.Keyframes.appEditor visual de animaciones CSS con línea de tiempo.Guía de keyframesExplicación interactiva de las animaciones CSS.View Transitions APITransiciones nativas entre estados y páginas.Scroll-driven AnimationsDemos de animaciones controladas por el scroll solo con CSS.

Respeta a quien prefiere menos movimiento

Algunas personas sienten mareo con animaciones grandes. Desactívalas o redúcelas con la media query prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Y anima preferentemente transform y opacity: son las propiedades que el navegador mueve con más fluidez.