Animaciones y efectos

Una colección de más de 70 animaciones y microinteracciones listas para copiar y pegar: entradas, botones, tarjetas, texto, loaders, scroll, fondos, iconos, modales, SVG y cursores. Cada ejemplo es un archivo HTML autocontenido que puedes ver en vivo, abrir en el Playground o copiar por partes (HTML, CSS y JS).

En proyectos reales, las animaciones no son "adorno": guían la atención del usuario, confirman que una acción funcionó (un check, un "¡Copiado!"), hacen que las esperas se sientan más cortas (skeletons, loaders) y dan personalidad a una marca. Bien usadas, convierten un sitio correcto en uno que se siente profesional. Mal usadas, distraen, marean y hacen la página lenta. Por eso cada sección empieza con una mini explicación técnica.

Cómo usar esta galería

Elige una categoría en las tarjetas de abajo.
Mira la vista previa (prueba los modos móvil/tablet/escritorio y el botón ↻ para repetir).
Copia el bloque que necesites: casi todo es CSS puro; cuando hay JavaScript es vanilla, corto y comentado.
Personaliza con las variables CSS que están al inicio de cada :root (colores, duración, tamaños).

Todos los demos respetan prefers-reduced-motion

Algunas personas activan "Reducir movimiento" en su sistema porque las animaciones les causan mareo o distracción. Cada demo incluye un bloque @media (prefers-reduced-motion: reduce) que desactiva o suaviza el movimiento. Cópialo siempre junto con la animación.

Categorías

01 · EntradaFade, slide, zoom, flip, bounce y listas escalonadas (stagger).02 · Hover en botonesRelleno, borde dibujado, brillo, neón, magnético, ripple y 3D.03 · Tarjetas e imágenesTilt 3D, flip card, zoom, overlay y borde degradado giratorio.04 · TextoMáquina de escribir, degradado, glitch, letra por letra y contador.05 · Loaders y spinners12 loaders CSS, skeleton y barras de progreso.06 · ScrollReveal, progreso de lectura, parallax, sticky y scroll-driven CSS.07 · FondosDegradado, partículas, aurora, olas SVG, estrellas y cuadrícula retro.08 · MicrointeraccionesHamburguesa→X, like, check, toggle, campana y copiar.09 · Modales y vistasModales con zoom/slide, drawer, pestañas y View Transitions.10 · SVGDibujo de líneas, morphing y logo animado.11 · CursorCursor personalizado, estela y spotlight.

Lo mínimo que debes saber antes de animar

Concepto	Para qué sirve	Ejemplo
`transition`	Animar el paso entre dos estados (normal → hover). Necesita un disparador.	`transition: transform .3s ease;`
`animation` + `@keyframes`	Animaciones con varios pasos, que se repiten o arrancan solas al cargar.	`animation: girar 1s linear infinite;`
`transform`	Mover, escalar, rotar o inclinar sin afectar al layout.	`transform: translateY(-4px) scale(1.05);`
`opacity`	Aparecer y desaparecer.	`opacity: 0;`
`will-change`	Avisar al navegador de que algo va a animarse (úsalo con moderación).	`will-change: transform;`

Regla de oro del rendimiento

Anima sólo transform y opacity. El navegador puede animarlas en la GPU sin recalcular el layout. Animar width, height, top, left o margin obliga a recalcular la posición de toda la página en cada fotograma y produce tirones, sobre todo en móviles.

Librerías útiles

Todo lo de esta galería funciona sin dependencias, pero en proyectos grandes estas librerías te ahorran mucho tiempo:

Animate.cssAnimaciones CSS predefinidas con sólo añadir una clase.GSAPEl estándar profesional: timelines, ScrollTrigger, SVG y más. Gratis.AOSAnimate On Scroll: aparecer al hacer scroll con atributos data-aos.MotionAnimaciones para JS, React y Vue con física de resortes.LottieReproduce animaciones de After Effects exportadas a JSON.MDN: animaciones CSSLa referencia oficial para entender cada propiedad.

Requisitos previos

Saber HTML y CSS básicos (selectores, clases, pseudo-clases como :hover).
Para los efectos con JavaScript: eventos (addEventListener) y manipulación del DOM.
Puedes experimentar con cualquier demo en el Playground.