Cómo animar un menú móvil con CSS

Cómo animar un menú móvil con CSS creando un menú hamburguesa accesible, responsive y fluido con transform, opacity, transition y JavaScript.

3/7/2026

Imagen del artículo Cómo animar un menú móvil con CSS

Los menús de navegación para dispositivos móviles se han convertido en un componente imprescindible en la mayoría de los sitios web. Cuando el espacio disponible en pantalla es reducido, la navegación principal suele ocultarse detrás de un botón reconocible, generalmente representado mediante tres líneas horizontales. Al pulsarlo, el menú aparece con una transición que ayuda al usuario a comprender qué está ocurriendo en la interfaz.

Sin embargo, añadir movimiento a un menú no consiste únicamente en aplicar una propiedad transition. Una animación mal planteada puede generar saltos visuales, problemas de rendimiento o dificultades de accesibilidad. Por el contrario, un menú móvil CSS animado correctamente implementado puede mejorar la orientación, reforzar la jerarquía visual y hacer que la navegación resulte más natural.

En esta guía veremos cómo animar un menú móvil con CSS, qué estructura HTML conviene utilizar, cómo controlar su apertura, qué propiedades ofrecen mejor rendimiento y cómo respetar las preferencias de movimiento de cada persona.

Un menú móvil animado es un sistema de navegación diseñado para pantallas pequeñas que permanece oculto hasta que el usuario activa un botón. Al abrirse o cerrarse, el panel cambia de estado mediante una transición o una animación.

El patrón más habitual es el denominado menú hamburguesa CSS, aunque también pueden utilizarse otros iconos, como una flecha, varios puntos o una etiqueta de texto que indique claramente “Menú”.

La animación puede aplicarse de diferentes maneras:

Desplazando el panel desde uno de los laterales.
Mostrándolo desde la parte superior.
Aplicando una aparición gradual.
Escalando el contenido desde un punto concreto.
Ocupando toda la pantalla con una capa de navegación.
Animando cada enlace con un pequeño retraso.

El objetivo no debería ser llamar la atención mediante efectos complejos. La animación tiene que explicar el cambio de estado, no dificultarlo.

Cuando el menú se desplaza desde el lateral derecho, por ejemplo, el usuario percibe que existe un panel fuera del área visible. Cuando se desvanece, entiende que el elemento estaba oculto y acaba de aparecer. El movimiento aporta contexto espacial a la interacción.

Antes de comenzar con la animación, necesitamos una estructura HTML clara y semántica.

Aunque es posible abrir y cerrar un menú utilizando exclusivamente CSS mediante un checkbox, en un proyecto real suele ser preferible emplear un botón y una pequeña cantidad de JavaScript. Esto facilita la gestión de atributos de accesibilidad como aria-expanded.

<header class="site-header"> <a class="site-logo" href="/"> Marta González </a> <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="mobile-menu" aria-label="Abrir menú" > <span class="menu-toggle__line"></span> <span class="menu-toggle__line"></span> <span class="menu-toggle__line"></span> </button> <nav class="mobile-menu" id="mobile-menu" aria-label="Navegación principal" > <ul class="mobile-menu__list"> <li><a href="/">Inicio</a></li> <li><a href="/servicios/">Servicios</a></li> <li><a href="/proyectos/">Proyectos</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="/contacto/">Contacto</a></li> </ul> </nav>
</header>

El botón utiliza aria-controls para indicar qué elemento controla. El atributo aria-expanded comunica si el menú está abierto o cerrado.

Estos detalles no modifican la apariencia, pero sí ayudan a quienes navegan mediante lectores de pantalla u otras tecnologías de asistencia.

¿Por qué conviene utilizar un botón?

Un error habitual consiste en crear el activador mediante un <div> o un <span>. Aunque estos elementos pueden recibir eventos de clic, no ofrecen de forma predeterminada el comportamiento de un botón.

Un elemento <button>:

Puede recibir el foco mediante teclado.
Se activa con las teclas adecuadas.
Tiene una semántica reconocible.
Permite utilizar atributos aria.
No requiere recrear manualmente comportamientos nativos.

Siempre que un elemento ejecute una acción, el botón suele ser la opción correcta.

Empecemos definiendo algunas variables y los estilos generales del encabezado.

:root { --header-height: 4.5rem; --menu-background: #ffffff; --menu-text: #020101; --menu-accent: #cc2b5e; --menu-duration: 350ms; --menu-easing: cubic-bezier(0.22, 1, 0.36, 1);
} *,
*::before,
*::after { box-sizing: border-box;
} body { margin: 0; color: var(--menu-text); font-family: system-ui, sans-serif;
} .site-header { position: relative; z-index: 20; display: flex; min-height: var(--header-height); align-items: center; justify-content: space-between; padding-inline: 1.25rem; background: #ffffff;
} .site-logo { position: relative; z-index: 30; color: inherit; font-weight: 700; text-decoration: none;
}

El z-index del encabezado será importante cuando coloquemos el menú en una capa independiente.

Estilos del botón hamburguesa

El botón tendrá tres líneas que después transformaremos en una cruz.

.menu-toggle { position: relative; z-index: 30; display: grid; width: 3rem; height: 3rem; padding: 0.65rem; border: 0; background: transparent; cursor: pointer;
} .menu-toggle__line { display: block; width: 100%; height: 2px; margin: auto; border-radius: 999px; background: currentColor; transform-origin: center; transition: transform var(--menu-duration) var(--menu-easing), opacity 200ms ease;
} .menu-toggle:focus-visible { outline: 3px solid var(--menu-accent); outline-offset: 3px;
}

El estilo :focus-visible permite mostrar un indicador claro cuando el control recibe el foco mediante teclado.

No conviene eliminar el contorno con outline: none sin proporcionar una alternativa. El foco visible es esencial para saber qué elemento está activo.

Una de las soluciones más eficaces consiste en colocar el menú fuera de la pantalla y desplazarlo cuando se activa.

.mobile-menu { position: fixed; inset: 0 0 0 auto; z-index: 10; display: grid; width: min(85vw, 25rem); min-height: 100dvh; padding: calc(var(--header-height) + 2rem) 2rem 2rem; background: var(--menu-background); box-shadow: -1rem 0 3rem rgb(0 0 0 / 15%); transform: translateX(100%); visibility: hidden; transition: transform var(--menu-duration) var(--menu-easing), visibility 0s linear var(--menu-duration);
} .mobile-menu.is-open { transform: translateX(0); visibility: visible; transition: transform var(--menu-duration) var(--menu-easing), visibility 0s linear 0s;
}

El panel empieza con translateX(100%), por lo que queda desplazado hacia la derecha. Al añadir la clase .is-open, vuelve a su posición original.

La propiedad visibility evita que los enlaces ocultos puedan recibir el foco. Su transición se retrasa durante el cierre para que el panel no desaparezca antes de completar el movimiento.

¿Por qué utilizar transform en lugar de left o right?

También podríamos animar la propiedad right:

.mobile-menu { right: -100%;
} .mobile-menu.is-open { right: 0;
}

Visualmente podría ofrecer un resultado parecido, pero animar propiedades relacionadas con la posición y la geometría puede obligar al navegador a recalcular la distribución de la página.

En cambio, transform suele ser una opción más adecuada para el movimiento. Por este motivo, al plantear una mobile menu animation CSS, normalmente conviene priorizar:

transform
opacity

Estas propiedades permiten crear animaciones fluidas sin modificar continuamente las dimensiones o la posición calculada del documento.

CSS se ocupará de la animación, mientras que JavaScript cambiará el estado del componente.

const menuButton = document.querySelector(".menu-toggle");
const mobileMenu = document.querySelector(".mobile-menu"); function setMenuState(isOpen) { mobileMenu.classList.toggle("is-open", isOpen); menuButton.classList.toggle("is-active", isOpen); menuButton.setAttribute("aria-expanded", String(isOpen)); menuButton.setAttribute( "aria-label", isOpen ? "Cerrar menú" : "Abrir menú" ); document.body.classList.toggle("menu-open", isOpen);
} menuButton.addEventListener("click", () => { const isOpen = menuButton.getAttribute("aria-expanded") === "true"; setMenuState(!isOpen);
});

La función centraliza todos los cambios relacionados con el estado:

Añade o elimina la clase del panel.
Actualiza el botón.
Modifica aria-expanded.
Cambia la etiqueta accesible.
Añade una clase al body.

Esta última clase permite impedir que la página continúe desplazándose mientras el menú ocupa la pantalla.

body.menu-open { overflow: hidden;
}

Centralizar el comportamiento evita inconsistencias. Si en el futuro añadimos nuevas formas de cerrar el menú, todas podrán llamar a la misma función.

Cómo transformar el icono hamburguesa en una cruz

Las líneas del botón también pueden animarse para indicar que el menú se encuentra abierto.

.menu-toggle.is-active .menu-toggle__line:nth-child(1) { transform: translateY(0.56rem) rotate(45deg);
} .menu-toggle.is-active .menu-toggle__line:nth-child(2) { opacity: 0; transform: scaleX(0);
} .menu-toggle.is-active .menu-toggle__line:nth-child(3) { transform: translateY(-0.56rem) rotate(-45deg);
}

La primera y la tercera línea se desplazan hacia el centro y rotan. La línea central desaparece mediante opacity y scaleX.

El resultado es una transición reconocible entre el icono de menú y el icono de cierre.

Ajustar la transformación sin valores frágiles

El desplazamiento de las líneas depende del tamaño del botón, del espacio disponible y de la distribución interna. Por ello, no conviene copiar valores de otro proyecto sin revisarlos.

Una alternativa más controlable consiste en posicionar las líneas de forma absoluta:

.menu-toggle { position: relative;
} .menu-toggle__line { position: absolute; left: 25%; width: 50%;
} .menu-toggle__line:nth-child(1) { top: 32%;
} .menu-toggle__line:nth-child(2) { top: 50%; transform: translateY(-50%);
} .menu-toggle__line:nth-child(3) { bottom: 32%;
} .menu-toggle.is-active .menu-toggle__line:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg);
} .menu-toggle.is-active .menu-toggle__line:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(0);
} .menu-toggle.is-active .menu-toggle__line:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg);
}

Esta solución ofrece un mayor control sobre el punto en el que las líneas se cruzan.

Además del panel, podemos animar cada enlace con un pequeño retraso. Este recurso se conoce habitualmente como animación escalonada o staggered animation.

.mobile-menu__list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none;
} .mobile-menu__list li { opacity: 0; transform: translateX(1.25rem); transition: transform 300ms var(--menu-easing), opacity 300ms ease;
} .mobile-menu.is-open .mobile-menu__list li { opacity: 1; transform: translateX(0);
}

Después podemos aplicar diferentes retrasos:

.mobile-menu.is-open .mobile-menu__list li:nth-child(1) { transition-delay: 80ms;
} .mobile-menu.is-open .mobile-menu__list li:nth-child(2) { transition-delay: 120ms;
} .mobile-menu.is-open .mobile-menu__list li:nth-child(3) { transition-delay: 160ms;
} .mobile-menu.is-open .mobile-menu__list li:nth-child(4) { transition-delay: 200ms;
} .mobile-menu.is-open .mobile-menu__list li:nth-child(5) { transition-delay: 240ms;
}

El desfase debe ser breve. Si cada elemento tarda demasiado en aparecer, el usuario tendrá que esperar para encontrar el enlace que necesita.

Una animación escalonada funciona mejor cuando:

Hay pocos elementos.
Los retrasos son reducidos.
El movimiento conserva una misma dirección.
El contenido continúa siendo usable con rapidez.

Utilizar una variable CSS para controlar el retraso

Podemos evitar varios selectores nth-child utilizando una variable personalizada:

<li style="--item-index: 0"><a href="/">Inicio</a></li>
<li style="--item-index: 1"><a href="/servicios/">Servicios</a></li>
<li style="--item-index: 2"><a href="/proyectos/">Proyectos</a></li>
<li style="--item-index: 3"><a href="/blog/">Blog</a></li>
<li style="--item-index: 4"><a href="/contacto/">Contacto</a></li>

.mobile-menu.is-open .mobile-menu__list li { transition-delay: calc(70ms + var(--item-index) * 40ms);
}

Así, la duración puede ajustarse desde un único lugar.

Cuando el menú aparece como un panel lateral, resulta útil oscurecer el contenido situado detrás. Esta capa dirige la atención y comunica que la página principal se encuentra temporalmente inactiva.

Podemos crearla mediante un pseudoelemento:

.site-header::before { content: ""; position: fixed; inset: 0; z-index: 5; background: rgb(0 0 0 / 45%); opacity: 0; visibility: hidden; transition: opacity var(--menu-duration) ease, visibility 0s linear var(--menu-duration);
} .site-header:has(.mobile-menu.is-open)::before { opacity: 1; visibility: visible; transition: opacity var(--menu-duration) ease, visibility 0s linear 0s;
}

La pseudoclase :has() permite modificar el encabezado cuando contiene un menú abierto.

También podemos crear una capa independiente en el HTML. Esta alternativa resulta práctica cuando queremos cerrar el menú al pulsar fuera del panel.

<div class="menu-overlay" aria-hidden="true"></div>

.menu-overlay { position: fixed; inset: 0; z-index: 5; background: rgb(0 0 0 / 45%); opacity: 0; visibility: hidden; transition: opacity var(--menu-duration) ease, visibility 0s linear var(--menu-duration);
} .menu-overlay.is-visible { opacity: 1; visibility: visible; transition-delay: 0s;
}

Y actualizamos JavaScript:

const menuOverlay = document.querySelector(".menu-overlay"); function setMenuState(isOpen) { mobileMenu.classList.toggle("is-open", isOpen); menuButton.classList.toggle("is-active", isOpen); menuOverlay.classList.toggle("is-visible", isOpen); menuButton.setAttribute("aria-expanded", String(isOpen)); menuButton.setAttribute( "aria-label", isOpen ? "Cerrar menú" : "Abrir menú" ); document.body.classList.toggle("menu-open", isOpen);
} menuOverlay.addEventListener("click", () => { setMenuState(false);
});

Un menú accesible debería poder cerrarse mediante la tecla Escape.

document.addEventListener("keydown", (event) => { if (event.key !== "Escape") { return; } const isOpen = menuButton.getAttribute("aria-expanded") === "true"; if (isOpen) { setMenuState(false); menuButton.focus(); }
});

Al cerrar el panel, devolvemos el foco al botón que lo abrió. De esta forma, quien navega mediante teclado no pierde su posición en la interfaz.

También puede ser conveniente cerrar el menú después de seleccionar un enlace:

mobileMenu.addEventListener("click", (event) => { const clickedLink = event.target.closest("a"); if (clickedLink) { setMenuState(false); }
});

Esta medida resulta especialmente útil en páginas de una sola sección, donde los enlaces llevan a distintos puntos del mismo documento.

El desplazamiento lateral es una solución frecuente, pero no es la única forma de animar un menú CSS.

Podemos hacer que el menú aparezca debajo del encabezado.

.mobile-menu { position: absolute; top: 100%; right: 0; left: 0; min-height: auto; transform: translateY(-1rem); opacity: 0; visibility: hidden; transition: transform 250ms ease, opacity 250ms ease, visibility 0s linear 250ms;
} .mobile-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; transition-delay: 0s;
}

Esta variante funciona bien en menús cortos que no necesitan ocupar toda la pantalla.

Un menú superpuesto puede ocupar todo el viewport:

.mobile-menu { position: fixed; inset: 0; display: grid; place-items: center; min-height: 100dvh; padding: 5rem 2rem 2rem; background: var(--menu-background); opacity: 0; transform: scale(1.03); visibility: hidden; transition: opacity 300ms ease, transform 400ms var(--menu-easing), visibility 0s linear 400ms;
} .mobile-menu.is-open { opacity: 1; transform: scale(1); visibility: visible; transition-delay: 0s;
}

El cambio de escala debe ser sutil. Una ampliación excesiva puede resultar agresiva o generar una sensación de movimiento innecesaria.

Aparición mediante clip-path

Otra opción visual consiste en revelar el menú progresivamente con clip-path.

.mobile-menu { position: fixed; inset: 0; clip-path: circle(0 at calc(100% - 2.5rem) 2.5rem); visibility: hidden; transition: clip-path 500ms var(--menu-easing), visibility 0s linear 500ms;
} .mobile-menu.is-open { clip-path: circle(150% at calc(100% - 2.5rem) 2.5rem); visibility: visible; transition-delay: 0s;
}

Este efecto puede resultar atractivo, pero debería comprobarse en los navegadores y dispositivos incluidos en los requisitos del proyecto.

La solución más llamativa no siempre es la más adecuada. Para la mayoría de las interfaces, una transición sencilla con transform y opacity será más fácil de mantener.

Cómo respetar prefers-reduced-motion

Algunas personas reducen las animaciones en el sistema operativo porque el movimiento puede provocar molestias, mareos o dificultades de concentración.

La media query prefers-reduced-motion permite adaptar la experiencia.

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

También podemos aplicar una versión más específica:

@media (prefers-reduced-motion: reduce) { .mobile-menu, .mobile-menu__list li, .menu-toggle__line, .menu-overlay { transition: none; }
}

La segunda opción evita modificar todas las animaciones del proyecto y se limita al componente.

Respetar esta preferencia no significa eliminar funcionalidad. El menú debe continuar abriéndose y cerrándose, pero sin una transición prolongada.

Un menú móvil no debería continuar oculto detrás de un botón cuando existe espacio suficiente para mostrar la navegación completa.

@media (min-width: 48rem) { .menu-toggle, .menu-overlay { display: none; } .mobile-menu { position: static; display: block; width: auto; min-height: auto; padding: 0; background: transparent; box-shadow: none; transform: none; visibility: visible; } .mobile-menu__list { display: flex; align-items: center; gap: 1.5rem; } .mobile-menu__list li { opacity: 1; transform: none; transition: none; } body.menu-open { overflow: auto; }
}

El punto de ruptura no debería elegirse únicamente por un dispositivo concreto. Conviene observar el momento en el que los enlaces dejan de caber cómodamente en una línea.

Un menú puede necesitar transformarse en móvil a 768 píxeles, 900 píxeles o cualquier otra anchura, dependiendo de:

La cantidad de enlaces.
La longitud de las etiquetas.
El tamaño del logotipo.
El espacio entre elementos.
El idioma del sitio.
El diseño general del encabezado.

Animar display: none

La propiedad display no puede interpolarse como opacity o transform.

Este código no producirá una transición gradual:

.mobile-menu { display: none; opacity: 0;
} .mobile-menu.is-open { display: block; opacity: 1;
}

Cuando el elemento pasa de display: none a display: block, aparece directamente. Después puede aplicarse la opacidad, pero el proceso no siempre ofrece el resultado esperado.

Para controlar la interacción y la visibilidad durante una transición, podemos combinar:

opacity
transform
visibility
pointer-events

Un elemento con opacity: 0 continúa ocupando espacio y puede seguir recibiendo clics o foco.

Por ello, este código es insuficiente:

.mobile-menu { opacity: 0;
}

Podemos reforzarlo así:

.mobile-menu { opacity: 0; visibility: hidden; pointer-events: none;
} .mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto;
}

Utilizar duraciones demasiado largas

Un menú es una herramienta funcional. El usuario quiere acceder rápidamente a otra sección.

Las transiciones de entre aproximadamente 200 y 400 milisegundos suelen ofrecer una sensación fluida sin introducir una espera evidente. No obstante, la duración adecuada dependerá del tamaño del panel y de la distancia recorrida.

Un panel que atraviesa toda la pantalla puede necesitar algo más de tiempo que un pequeño cambio de opacidad, pero rara vez requiere una animación de un segundo completo.

Sobrecargar el componente con efectos

Mover el panel, escalarlo, rotarlo, difuminarlo y animar simultáneamente todos sus enlaces puede dificultar la lectura.

Una buena regla práctica consiste en elegir:

Una animación principal para el contenedor.
Una transformación clara para el botón.
Una animación secundaria opcional para los enlaces.

Más efectos no implican una mejor experiencia.

No comprobar la navegación mediante teclado

El menú puede parecer correcto con el ratón y presentar problemas al utilizar la tecla Tab.

Antes de darlo por terminado, conviene comprobar que:

El botón recibe el foco.
El estado del foco es visible.
Los enlaces ocultos no pueden enfocarse.
El menú puede cerrarse con Escape.
El foco vuelve al botón al cerrar.
El orden de navegación es lógico.

Prestar atención al control del foco

En un menú que ocupa toda la pantalla, puede ser recomendable mantener temporalmente el foco dentro del panel mientras permanece abierto. Esto se conoce como focus trapping.

No todos los menús desplegables necesitan comportarse como un diálogo modal. Sin embargo, cuando la navegación bloquea completamente el resto de la interfaz, conviene estudiar si el foco debería quedar limitado a sus controles.

Consejos para conseguir una animación más profesional

Mantén una dirección coherente

Si el panel entra desde la derecha, los enlaces pueden aparecer desplazándose ligeramente desde esa misma dirección. Esta coherencia ayuda a que el movimiento resulte predecible.

Utiliza una curva de aceleración adecuada

La función ease puede ser suficiente, pero una curva personalizada permite controlar mejor la sensación de movimiento.

transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);

Esta curva genera una entrada rápida que se suaviza al llegar al destino. El menú se percibe ágil sin detenerse de forma brusca.

Evita utilizar will-change permanentemente

La propiedad will-change puede avisar al navegador de que un elemento cambiará próximamente:

.mobile-menu { will-change: transform;
}

Sin embargo, no debería aplicarse indiscriminadamente a muchos componentes. Mantener capas optimizadas de forma permanente puede aumentar el consumo de recursos.

En un menú pequeño quizá no sea necesaria. Conviene utilizarla únicamente cuando las pruebas de rendimiento muestren una mejora real.

Prueba en dispositivos reales

Las herramientas del navegador permiten simular diferentes anchuras, pero no reproducen por completo:

El rendimiento de un teléfono de gama media o baja.
La interacción táctil.
La barra dinámica del navegador.
Los cambios de orientación.
El comportamiento del teclado virtual.
Las áreas seguras de algunos dispositivos.

Para la altura del panel, 100dvh puede adaptarse mejor a los cambios de la interfaz del navegador que el tradicional 100vh.

Lista de comprobación antes de publicar

Antes de dar por finalizado el menú hamburguesa CSS, revisa los siguientes puntos:

El botón es un elemento <button>.
Incluye aria-controls y aria-expanded.
El texto accesible cambia entre abrir y cerrar.
El menú oculto no puede recibir el foco.
La animación utiliza preferentemente transform y opacity.
El contenido no se desplaza accidentalmente al abrir el panel.
Existe una forma clara de cerrar el menú.
La tecla Escape funciona.
El foco es visible.
Se respeta prefers-reduced-motion.
El menú se adapta correctamente a escritorio.
Los enlaces tienen un área táctil suficiente.
La duración de la transición no retrasa la navegación.
El comportamiento se ha probado con teclado y pantalla táctil.

Esta revisión permite detectar problemas que pueden pasar desapercibidos cuando solo se evalúa la apariencia visual.

Sí. Puede utilizarse un checkbox oculto junto con un <label> y selectores como :checked para modificar el estado del menú.

No obstante, esta solución puede complicar la semántica y la actualización de atributos accesibles. En proyectos reales suele resultar más mantenible utilizar CSS para la presentación y una pequeña cantidad de JavaScript para gestionar el estado.

Las propiedades más recomendables son transform y opacity. Permiten desplazar, escalar o desvanecer el menú sin depender continuamente de cambios en su geometría.

Propiedades como width, height, left, right o margin pueden utilizarse, pero suelen requerir más trabajo del navegador durante la animación. Siempre conviene comprobar el resultado con las herramientas de rendimiento.

La duración debe ser suficiente para que el cambio de estado se entienda, pero no tan larga como para retrasar el acceso a los enlaces.

Como referencia inicial, pueden probarse valores entre 200 y 400 milisegundos. Los efectos secundarios, como la aparición escalonada de los enlaces, deberían utilizar retrasos pequeños para evitar que la navegación se sienta lenta.

El movimiento debe acompañar a la navegación, no competir con ella

Aprender cómo animar un menú móvil con CSS implica algo más que elegir un efecto llamativo. El componente debe ser comprensible, rápido, accesible y fácil de mantener.

Una animación lateral mediante transform, acompañada de una capa de fondo y una transformación sencilla del botón, suele ser suficiente para crear una experiencia clara. A partir de esa base pueden añadirse detalles como la entrada escalonada de los enlaces, siempre que no retrasen la interacción.

También es importante recordar que el menú es una de las principales vías de acceso al contenido. Si su apertura resulta confusa, si los enlaces ocultos reciben el foco o si el movimiento genera molestias, la animación deja de cumplir su función.

La mejor animación no es necesariamente la más compleja. Es aquella que hace visible el cambio de estado sin obligar al usuario a pensar en el propio efecto. Cuando el movimiento acompaña de forma natural a la navegación, el diseño se percibe más cuidado y la interfaz resulta más fácil de utilizar.

Cómo animar un menú móvil con CSS

¿Qué es un menú móvil animado?

Estructura básica de un menú hamburguesa accesible

¿Por qué conviene utilizar un botón?

Cómo crear la apariencia inicial del menú

Estilos del botón hamburguesa