Cómo animar un icono de menú hamburguesa
Cómo animar un icono hamburguesa hasta convertirse en botón de cierre: geometría, tiempos, coordinación con el panel y los atributos accesibles que deben seguirlo.
Idea clave
El icono hamburguesa es una etiqueta de estado: tres líneas significan cerrado y una X significa abierto. Anima las líneas superior e inferior hacia las diagonales trasladándolas y girándolas, y desvanece u oculta la del medio. Mantén la transición corta y simétrica, y haz que el nombre accesible del botón y aria-expanded cambien con el icono, no solo la animación.
Es un indicador de estado, no decoración
El usuario lee el icono para saber si el menú está abierto. La animación debe hacer obvio el cambio sin convertirse en un espectáculo. La transformación más legible es la de tres líneas convertidas en X, porque las formas se corresponden y el ojo puede seguir el movimiento.
La geometría que funciona
Coloca las barras superior e inferior, trasládalas al centro vertical y gira una 45 grados y la otra -45. La barra central se desvanece o se reduce a cero. Como cambias transformaciones, el navegador puede animarlas de forma barata. Mantén las barras de la misma longitud para que la X sea simétrica.
Tiempo y simetría
Las dos diagonales deben llegar juntas. Si una gira antes que la otra, el icono parece deshacerse. Corto y uniforme es mejor que lento y elaborado. Al invertir la animación debe recuperarse exactamente la geometría original, para que el estado cerrado sea idéntico al inicio.
Coordínalo con el panel
El cambio del icono y la apertura del menú son un solo evento. Si el panel se desliza desde un lado, empieza el cambio del icono en ese momento, no cuando el panel termine. Si el panel tapa el icono, la animación se desperdicia: deja visible el control de cierre o añade un botón claro dentro.
La accesibilidad va primero
Usa un botón real con un nombre accesible que cambie entre abrir y cerrar, y mantén aria-expanded sincronizado. El icono es decorativo, así que ocúltalo a la tecnología de asistencia. Al abrir el menú, lleva el foco dentro o al primer elemento, atrápalo si se comporta como un diálogo y devuélvelo al botón al cerrar.
Movimiento reducido
Con movimiento reducido, cambia el icono sin girarlo o usa un fundido cruzado muy corto. El cambio de estado debe seguir siendo claro, así que no elimines la diferencia visual: quita el recorrido.
Fragmento de implementación en producción
.icon span {
transition: transform 180ms ease, opacity 180ms ease;
}
.icon[data-open="true"] span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.icon[data-open="true"] span:nth-child(2) {
opacity: 0;
}
.icon[data-open="true"] span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
.icon span { transition: opacity 80ms linear; }
}Principios clave para recordar
- El icono comunica abierto o cerrado, así que mantenlo sincronizado con el estado
- Traslada y gira las barras exteriores, y desvanece la central
- Las dos diagonales deben aterrizar juntas
- Inicia el cambio del icono con el panel, no después
- Actualiza aria-expanded y el nombre accesible junto con el icono
Preguntas frecuentes
Fuentes
- Disclosure Pattern — W3C WAI-ARIA Authoring Practices
- Dialog (Modal) Pattern — W3C WAI-ARIA Authoring Practices
- prefers-reduced-motion — MDN Web Docs