Iconos y microinteracciones

Las microinteracciones son animaciones pequeñas que responden a una acción: el corazón que late al dar "me gusta", el check que se dibuja al completar una tarea, el "¡Copiado!" que confirma una acción. Son detalles de segundos, pero marcan la diferencia entre una interfaz correcta y una que se siente cuidada.

Concepto: el estado vive en atributos ARIA

Un patrón profesional es guardar el estado del componente en atributos de accesibilidad y que el CSS reaccione a ellos:

<button class="hamburguesa" aria-expanded="false" aria-label="Abrir menú">…</button>

.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }

btn.setAttribute('aria-expanded', btn.getAttribute('aria-expanded') !== 'true');

Ventajas: un solo dato controla la animación y la accesibilidad a la vez. Los lectores de pantalla anuncian "menú, expandido" o "me gusta, presionado" sin trabajo extra.

Componente	Atributo
Menú hamburguesa, acordeón	aria-expanded
Botón de alternar (like, favorito)	aria-pressed
Interruptor	<input type="checkbox" role="switch"> (:checked)
Mensajes que aparecen	role="status"

Curvas con rebote

Muchas microinteracciones usan cubic-bezier(.68, -0.55, .27, 1.55): los valores fuera del rango 0–1 hacen que la animación "se pase" y vuelva, dando una sensación elástica y divertida.

Hamburguesa → X, corazón "me gusta" y toggle

Hamburguesa, like y toggle

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Hamburguesa → X: las tres líneas son spans posicionados. Al abrir, la de arriba y la de abajo se mueven al centro (top: 13px) y giran ±45°; la del medio se desvanece.

Corazón "me gusta": tres capas animadas a la vez cuando aria-pressed="true":

1. El SVG se rellena y hace un "pop" (scale(0) → 1.25 → 1).
2. ::before es un anillo que se expande y desaparece.
3. ::after es un punto con 8 box-shadow de colores que salen disparados como confeti.

Toggle: es un <input type="checkbox"> real (invisible) sobre un diseño propio. Así conserva el teclado, el foco y los formularios gratis. La bolita se estira al presionar (:active) para dar sensación física.

Check animado, campana y copiar

Check, campana y copiar

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Check animado: un círculo y una palomita SVG que se "dibujan" con stroke-dasharray y stroke-dashoffset (técnica explicada a fondo en la sección SVG). El trazo de la palomita empieza con retraso para que se dibuje después del círculo.

Campana: gira desde su punto superior (transform-origin: 50% 10%) con oscilaciones cada vez más pequeñas, como un péndulo. El badge entra con un scale elástico. Para repetir la animación en cada clic:

campana.classList.remove('sonar');
void campana.offsetWidth;   // fuerza un reflow: el navegador "olvida" la animación
campana.classList.add('sonar');

Copiar con feedback: usa la API del portapapeles y durante 1.5 s cambia el icono (cruzando los dos SVG con rotación), el color y muestra un tooltip:

await navigator.clipboard.writeText(texto);
btn.classList.add('copiado');
setTimeout(() => btn.classList.remove('copiado'), 1500);

El portapapeles necesita HTTPS

navigator.clipboard sólo funciona en páginas seguras (HTTPS o localhost) y puede bloquearse dentro de iframes. Envuelve la llamada en try/catch como en el demo.

Buenas prácticas de microinteracciones

• Rápidas: entre 150 y 400 ms. Si el usuario tiene que esperar a que termine, es demasiado lenta.
• Con propósito: cada animación debe comunicar algo (cambió el estado, se completó, hay algo nuevo).
• Consistentes: usa las mismas duraciones y curvas en todo el proyecto. Defínelas como variables:

:root {
  --dur-rapida: 150ms;
  --dur-media: 300ms;
  --curva-salida: cubic-bezier(.22, 1, .36, 1);
  --curva-rebote: cubic-bezier(.68, -0.55, .27, 1.55);
}

Ejercicios

1. Convierte la hamburguesa en una flecha "←" en lugar de una X.
2. Añade una animación de "sacudida" horizontal a un campo de formulario cuando hay un error.
3. Crea un botón de "favorito" con una estrella que gire 72° al activarse.

Ver solución del ejercicio 2

.campo.error { animation: sacudir .4s; border-color: #ef4444; }
@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

campo.classList.remove('error');
void campo.offsetWidth;
campo.classList.add('error');

Resumen

• Guarda el estado en aria-expanded, aria-pressed o :checked y deja que el CSS reaccione.
• Usa elementos nativos (<button>, <input>) como base de los componentes animados.
• Para repetir una animación CSS: quitar clase → void el.offsetWidth → poner clase.
• Microinteracciones cortas (150–400 ms), con propósito y consistentes.