Micro-interacciones: Los Pequeños Detalles que Importan

Las micro-interacciones son animaciones pequeñas y específicas que responden a una acción del usuario. El corazón que se llena al dar like, el toggle que desliza suavemente, el input que vibra cuando hay un error — estos detalles son los que hacen que un producto se sienta pulido y profesional.

Anatomía de una micro-interacción

Trigger: lo que inicia la animación — hover, clic, scroll, carga, cambio de estado
Rules: qué sucede exactamente — qué elementos se mueven, cambian de color, aparecen o desaparecen
Feedback: la respuesta visual que confirma la acción — el usuario sabe que algo pasó
Loops & modes: ¿se repite? ¿Cambia con el tiempo? — un loading spinner es un loop, un badge de notificación es un mode

Micro-interacciones esenciales en UI

Botón hover/active: cambio sutil de color + scale al pasar el mouse, compresión al hacer clic
Toggle switch: deslizamiento suave del indicador con cambio de color del track
Input focus: el borde del campo cambia de color y opcionalmente el label se mueve arriba (floating label)
Validación de formulario: check verde animado para campos válidos, shake sutil para errores
Loading states: skeleton screens que pulsan suavemente son más elegantes que spinners
Notificaciones/toasts: entran deslizándose desde arriba o abajo, salen con fade después de unos segundos

Implementar micro-interacciones con CSS

CSS transitions: para cambios de estado simples (hover, focus, active) — lo más común y eficiente
CSS @keyframes: para animaciones más complejas con múltiples pasos (pulsing, shaking, bouncing)
transform + opacity: las propiedades más performantes para animar — GPU-accelerated, no causan reflow
NUNCA animes width, height, top, left directamente — usa transform: translate/scale en su lugar (mucho más eficiente)
will-change: informa al navegador que un elemento va a animarse para que lo optimice (usar con moderación)

Herramientas para prototipar animaciones

Figma Smart Animate: prototipa transiciones entre frames — excelente para comunicar la idea al equipo
Framer Motion (React): la mejor librería de animación para React — API declarativa y spring animations
Lottie: animaciones exportadas de After Effects como JSON — ultra ligeras y escalables
GSAP (GreenSock): librería JavaScript para animaciones complejas y timeline-based
CSS puro: para el 80% de las micro-interacciones en producción no necesitas ninguna librería

Ejemplo práctico

/* Skeleton loader pulsante */
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}
.skeleton {
  background: #E5E7EB;
  border-radius: 8px;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Shake para error de input */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.input-error {
  animation: shake 300ms ease;
  border-color: #EF4444;
}

/* Checkbox animado */
.check-icon {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 300ms ease;
}
.checkbox:checked + .check-icon {
  stroke-dashoffset: 0;
}

Consejo: Empieza animando solo botones, inputs y transiciones de página. Estos 3 elementos cubren el 80% de las micro-interacciones necesarias en cualquier producto.

Motion Design Básico

Micro-interacciones que Enganchan