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

Posted on by marta

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.

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

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.

Estructura básica de un menú hamburguesa accesible

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.

Cómo crear la apariencia inicial del menú

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.

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

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.

Controlar la apertura del menú con JavaScript

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.

Animar los enlaces del menú de forma escalonada

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.

Añadir una capa oscura detrás del menú

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);
});

Cerrar el menú con la tecla Escape

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.

Animaciones alternativas para un menú móvil

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

Menú desplegable desde la parte superior

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.

Menú a pantalla completa

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.

Adaptar el menú a escritorio

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.

Errores frecuentes al animar un menú móvil

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

Ocultar el menú solo con opacity

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:

  1. Una animación principal para el contenedor.
  2. Una transformación clara para el botón.
  3. 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.

Preguntas frecuentes sobre cómo animar un menú móvil con CSS

¿Es posible crear un menú móvil animado solo con CSS?

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.

¿Qué propiedades CSS conviene utilizar para animar un menú?

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.

¿Cuánto debería durar la animación de un menú hamburguesa?

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.

Animaciones CSS y rendimiento: qué propiedades conviene animar

Posted on by marta

Las animaciones CSS pueden transformar una interfaz estática en una experiencia más clara, fluida y agradable. Un botón que responde al pasar el cursor, una tarjeta que aparece suavemente, un menú que se despliega con naturalidad o un pequeño indicador de carga pueden ayudar al usuario a entender mejor qué está ocurriendo en la pantalla.

Sin embargo, no todas las animaciones tienen el mismo coste. En CSS, animar una propiedad u otra puede marcar una diferencia enorme en el rendimiento. Hay animaciones que el navegador puede resolver de forma muy eficiente, y otras que obligan a recalcular posiciones, redibujar elementos y consumir más recursos en cada fotograma.

Por eso, cuando hablamos de animaciones CSS y rendimiento, no basta con preguntarse si una animación “queda bonita”. También conviene preguntarse: ¿qué propiedad estoy animando?, ¿cómo afecta al navegador?, ¿puede provocar saltos visuales?, ¿se sentirá fluida en móviles o dispositivos menos potentes?

En este artículo vamos a ver qué propiedades conviene animar en CSS, cuáles deberías evitar siempre que sea posible y cómo optimizar animaciones CSS para crear interfaces más suaves, accesibles y profesionales.

Por qué el rendimiento importa tanto en las animaciones CSS

Una animación mal optimizada no solo afecta a la estética de una web. También puede afectar a la experiencia de usuario, a la percepción de calidad del producto e incluso al rendimiento general de la página.

Cuando una animación va a tirones, aparece lo que muchas veces se conoce como jank: pequeños bloqueos, saltos o interrupciones visuales que hacen que el movimiento no se perciba fluido. Puede parecer un detalle menor, pero en una interfaz interactiva esos tirones generan una sensación de lentitud, descuido o falta de respuesta.

Esto es especialmente importante en:

  • Menús móviles.
  • Modales.
  • Carruseles.
  • Tarjetas interactivas.
  • Botones con estados visuales.
  • Loaders.
  • Transiciones entre vistas.
  • Animaciones al hacer scroll.
  • Microinteracciones frecuentes.

Una animación puntual puede no suponer un problema. Pero si una página tiene muchos elementos animados, o si se animan propiedades costosas, el navegador puede empezar a sufrir. Y cuando el navegador sufre, el usuario también lo nota.

La clave está en entender que una animación CSS no es solo una declaración visual. Es una instrucción que el navegador tiene que procesar muchas veces por segundo.

Cómo renderiza el navegador una animación

Para entender qué propiedades CSS conviene animar, primero hay que comprender de forma sencilla cómo trabaja el navegador cuando muestra una página.

Cuando cambias estilos en una web, el navegador puede pasar por varias fases:

  1. Style, donde calcula qué estilos se aplican a cada elemento.
  2. Layout, donde calcula tamaños, posiciones y distribución de los elementos.
  3. Paint, donde dibuja visualmente los elementos, colores, sombras, bordes, textos e imágenes.
  4. Composite, donde combina las capas ya dibujadas para mostrarlas en pantalla.

No todas las propiedades CSS activan las mismas fases. Algunas obligan al navegador a recalcular el layout. Otras requieren volver a pintar elementos. Y otras, las más eficientes para animar, pueden resolverse principalmente en la fase de composición.

Aquí está la gran diferencia.

Si animas una propiedad como width, height, top, left, margin o padding, es muy probable que el navegador tenga que recalcular el layout. Eso significa que necesita revisar cómo cambia el tamaño o la posición del elemento y cómo ese cambio afecta al resto de la página.

En cambio, si animas transform u opacity, el navegador suele poder gestionar el cambio de forma mucho más eficiente, sin recalcular toda la estructura del documento.

Dicho de forma práctica: no todas las propiedades animables CSS son igual de recomendables desde el punto de vista del rendimiento.

Las mejores propiedades para animar en CSS

Si quieres crear animaciones fluidas y optimizadas, hay dos propiedades que deberían ser tu primera opción en la mayoría de casos: transform y opacity.

transform: la propiedad estrella para animaciones CSS de alto rendimiento

transform permite modificar visualmente un elemento sin alterar el flujo normal del documento. Puedes moverlo, escalarlo, rotarlo o inclinarlo sin cambiar realmente el espacio que ocupa en el layout.

Esto la convierte en una de las propiedades más recomendables para trabajar con performance CSS animations.

Con transform puedes usar funciones como:

  • translate()
  • translateX()
  • translateY()
  • scale()
  • rotate()
  • skew()

Por ejemplo, si quieres que una tarjeta se eleve ligeramente al pasar el cursor, es mejor usar transform que modificar márgenes o posiciones.

.card {
  transition: transform 0.25s ease;
}

.card:hover {
  transform: translateY(-8px);
}

Este enfoque es más eficiente que hacer algo como esto:

.card {
  position: relative;
  top: 0;
  transition: top 0.25s ease;
}

.card:hover {
  top: -8px;
}

Aunque visualmente el resultado pueda parecer parecido, técnicamente no es lo mismo. Al animar top, el navegador puede tener que recalcular posiciones. Al animar transform, el cambio se gestiona de forma más ligera.

Cuándo usar transform

Conviene utilizar transform para:

  • Desplazar elementos.
  • Crear efectos de entrada y salida.
  • Elevar tarjetas.
  • Animar botones.
  • Escalar iconos.
  • Rotar flechas o elementos decorativos.
  • Crear pequeños efectos de profundidad.
  • Animar menús o paneles laterales.

Un menú lateral, por ejemplo, puede animarse con translateX():

.menu {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.menu.is-open {
  transform: translateX(0);
}

Este patrón suele ser más recomendable que modificar left, right o margin-left.

opacity: ideal para apariciones y desapariciones suaves

La segunda gran propiedad recomendada para animaciones CSS de buen rendimiento es opacity.

opacity permite controlar la transparencia de un elemento sin alterar su tamaño ni su posición. Por eso es perfecta para efectos de aparición, desaparición, transiciones suaves y cambios visuales discretos.

Un ejemplo clásico:

.tooltip {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.button:hover .tooltip {
  opacity: 1;
}

Este tipo de transición es ligera, clara y muy útil para mejorar la interacción sin sobrecargar la interfaz.

Combinar opacity y transform

Muchas animaciones profesionales combinan opacity y transform. Por ejemplo, un elemento puede aparecer al mismo tiempo que se desplaza suavemente hacia su posición final.

.modal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.modal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

Este patrón funciona muy bien para modales, tarjetas, mensajes emergentes y elementos que entran en pantalla. Además, permite que el movimiento tenga intención: el usuario percibe que algo aparece desde una dirección concreta, no simplemente que “se enciende” de golpe.

Propiedades que conviene evitar al animar

Que una propiedad sea animable no significa que sea buena idea animarla. CSS permite transicionar muchas propiedades, pero algunas tienen un coste mucho mayor que otras.

Propiedades que pueden provocar recalculo de layout

Las propiedades relacionadas con tamaño, posición y distribución suelen ser más costosas porque pueden afectar al layout de la página.

Entre ellas están:

  • width
  • height
  • min-width
  • min-height
  • max-width
  • max-height
  • top
  • right
  • bottom
  • left
  • margin
  • padding
  • border-width
  • font-size
  • line-height

Por ejemplo, si quieres agrandar un botón al pasar el cursor, podrías pensar en animar el width y el height:

.button {
  width: 160px;
  height: 48px;
  transition:
    width 0.2s ease,
    height 0.2s ease;
}

.button:hover {
  width: 172px;
  height: 54px;
}

El problema es que ese cambio puede afectar al espacio ocupado por el botón y, por tanto, al resto del layout. Una alternativa más eficiente sería usar transform: scale():

.button {
  transition: transform 0.2s ease;
}

.button:hover {
  transform: scale(1.04);
}

Visualmente el botón crece, pero sin obligar al navegador a redistribuir el documento.

Propiedades que pueden provocar repintado

También hay propiedades que no siempre recalculan layout, pero sí pueden obligar al navegador a volver a pintar partes de la pantalla.

Algunos ejemplos son:

  • background-color
  • color
  • box-shadow
  • border-color
  • filter
  • text-shadow
  • outline
  • clip-path

Esto no significa que estén prohibidas. De hecho, animar background-color o color en un botón puede ser perfectamente aceptable si el cambio es sencillo. Pero conviene entender que no suelen ser tan eficientes como transform u opacity.

Un caso especialmente delicado es box-shadow. Las sombras grandes, difuminadas o animadas pueden ser costosas, sobre todo si se aplican a muchos elementos a la vez.

Por ejemplo:

.card {
  transition: box-shadow 0.25s ease;
}

.card:hover {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}

Este efecto puede quedar muy bien, pero si tienes una cuadrícula con muchas tarjetas y todas animan sombras complejas, el rendimiento puede resentirse.

Una alternativa sería combinar una sombra estática con un pequeño desplazamiento mediante transform:

.card {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease;
}

.card:hover {
  transform: translateY(-6px);
}

El resultado mantiene la sensación de elevación, pero reduce el trabajo durante la animación.

Tabla práctica: qué propiedades conviene animar y cuáles no

Para simplificar la toma de decisiones, puedes usar esta guía rápida.

Propiedades recomendadas

transform

Ideal para mover, escalar, rotar o crear efectos de entrada y salida. Es la opción preferente para animaciones fluidas.

Ejemplos de uso:

transform: translateY(-8px);
transform: scale(1.05);
transform: rotate(180deg);

opacity

Ideal para mostrar u ocultar elementos de forma suave, crear fundidos y reforzar cambios de estado.

Ejemplo:

opacity: 0;
opacity: 1;

Propiedades aceptables con moderación

background-color y color

Son útiles para estados hover, botones y feedback visual. Funcionan bien en microinteracciones simples, aunque pueden requerir repintado.

.button {
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

filter

Puede servir para efectos visuales como desenfoque, brillo o escala de grises, pero conviene usarlo con cuidado. Un blur() grande o aplicado a elementos complejos puede ser costoso.

.image {
  transition: filter 0.3s ease;
}

.image:hover {
  filter: brightness(1.1);
}

clip-path

Puede crear efectos visuales muy interesantes, pero no siempre es la opción más barata. Úsala cuando aporte valor real y prueba el rendimiento en dispositivos reales.

Propiedades que conviene evitar siempre que puedas

width y height

Evita animarlas para simular crecimiento o expansión si puedes resolverlo con transform: scale().

top, left, right y bottom

Evita usarlas para mover elementos. En su lugar, utiliza transform: translate().

margin y padding

Pueden afectar al espacio del elemento y al flujo de la página. Si solo buscas movimiento visual, usa transform.

box-shadow

No está prohibida, pero animarla puede ser costoso. Es mejor usar sombras estáticas y reforzar el efecto con transform.

Ejemplos de animaciones CSS optimizadas

Veamos algunos casos prácticos donde se puede mejorar el rendimiento cambiando la propiedad animada.

Ejemplo 1: botón con efecto hover

En lugar de agrandar el botón modificando su tamaño real, puedes usar transform.

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

Este efecto es sencillo, rápido y transmite respuesta sin exagerar el movimiento.

Ejemplo 2: tarjeta que aparece en pantalla

Una tarjeta puede aparecer combinando desplazamiento y opacidad:

.card {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

Este patrón es muy habitual en interfaces modernas porque aporta suavidad sin forzar cambios de layout.

Ejemplo 3: icono que rota al abrir un desplegable

Para indicar que un acordeón o menú se ha abierto, puedes rotar una flecha:

.icon {
  transition: transform 0.2s ease;
}

.accordion.is-open .icon {
  transform: rotate(180deg);
}

Es una microinteracción clara y eficiente.

Ejemplo 4: menú lateral optimizado

Un panel lateral puede moverse con translateX():

.sidebar {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.sidebar.is-open {
  transform: translateX(0);
}

Evitar left o margin-left en este caso ayuda a mantener la animación más fluida.

will-change: útil, pero no mágico

Cuando se habla de optimizar animaciones CSS, es habitual encontrarse con la propiedad will-change. Esta propiedad permite avisar al navegador de que un elemento va a cambiar próximamente.

Por ejemplo:

.card {
  will-change: transform;
}

A primera vista parece una solución perfecta: si vas a animar algo, se lo dices al navegador y listo. Pero no conviene usar will-change de forma indiscriminada.

will-change puede ayudar en casos concretos, pero también puede consumir más memoria y empeorar el rendimiento si se aplica a demasiados elementos o si se deja permanentemente en el CSS sin necesidad.

Cuándo usar will-change

Puede tener sentido usar will-change cuando:

  • Has detectado un problema real de rendimiento.
  • La animación afecta a un elemento importante.
  • El cambio va a ocurrir pronto.
  • Has medido que realmente mejora la experiencia.
  • No lo estás aplicando a decenas o cientos de elementos.

Cuándo evitar will-change

Es mejor evitarlo cuando:

  • La animación ya funciona bien.
  • Lo estás usando “por si acaso”.
  • Lo aplicas globalmente a muchas tarjetas, botones o imágenes.
  • No has comprobado el impacto real.
  • Lo dejas fijo en todos los estados.

Una buena regla práctica sería: primero elige bien las propiedades animadas; después mide; y solo entonces considera will-change si hace falta.

Duración, easing y percepción de rendimiento

El rendimiento técnico es importante, pero la percepción también lo es. Una animación puede estar bien optimizada y aun así sentirse lenta, pesada o molesta si la duración y la curva de aceleración no están bien elegidas.

Duraciones recomendadas

Para microinteracciones, las duraciones suelen funcionar bien entre:

  • 150ms y 250ms para botones, iconos y pequeños cambios de estado.
  • 250ms y 400ms para modales, menús y tarjetas.
  • Más de 500ms solo cuando el movimiento tiene una intención narrativa o visual muy clara.

Una animación demasiado rápida puede pasar desapercibida. Una demasiado lenta puede hacer que la interfaz se sienta torpe.

Elegir bien el easing

El valor de transition-timing-function también influye mucho. linear rara vez se siente natural para interfaces, porque los objetos en el mundo real no suelen moverse a velocidad constante desde el principio hasta el final.

Una opción sencilla y efectiva es:

transition: transform 0.25s ease;

También puedes usar curvas personalizadas:

transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);

La clave es que el movimiento acompañe la acción del usuario, no que compita con ella.

Animaciones CSS y accesibilidad

Optimizar animaciones CSS no solo significa mejorar la velocidad. También significa respetar a las personas usuarias.

Hay usuarios que pueden sentirse incómodos con determinados movimientos, especialmente si son bruscos, repetitivos, rápidos o afectan a grandes zonas de la pantalla. Por eso es recomendable tener en cuenta la media query prefers-reduced-motion.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

También puedes crear alternativas más cuidadas, reduciendo el desplazamiento pero manteniendo pequeños cambios de opacidad o color.

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: opacity 0.2s ease;
    transform: none;
  }

  .card.is-visible {
    opacity: 1;
  }
}

La accesibilidad no está reñida con el diseño. Una interfaz puede ser elegante, animada y a la vez respetuosa con las preferencias del usuario.

Cómo medir el rendimiento de tus animaciones

No conviene optimizar a ciegas. Aunque hay buenas prácticas generales, cada proyecto tiene su contexto: número de elementos, complejidad visual, imágenes, sombras, scripts, dispositivos objetivo y comportamiento del usuario.

Para comprobar si una animación funciona bien, puedes revisar:

  • Si hay tirones visibles.
  • Si el scroll se vuelve pesado.
  • Si la animación empeora en móvil.
  • Si se activan demasiadas animaciones al mismo tiempo.
  • Si hay cambios de layout inesperados.
  • Si una microinteracción se repite de forma excesiva.

Las herramientas de desarrollo del navegador pueden ayudarte a analizar qué está ocurriendo. En Chrome DevTools, por ejemplo, puedes revisar el rendimiento, observar fotogramas, detectar repintados y comprobar si una animación está provocando más trabajo del necesario.

Pero más allá de la herramienta, hay una pregunta básica que nunca falla: ¿la animación ayuda o solo decora?

Si ayuda a entender la interfaz, refuerza una acción o guía la atención, tiene sentido. Si solo añade ruido visual, quizá convenga simplificarla.

Buenas prácticas para optimizar animaciones CSS

A modo de resumen práctico, estas son algunas recomendaciones para mejorar el rendimiento de tus animaciones CSS.

Prioriza transform y opacity

Cuando puedas elegir, usa transform para movimiento y escala, y opacity para apariciones o desapariciones.

Evita animar propiedades de layout

No uses width, height, top, left, margin o padding para crear efectos visuales si puedes conseguir el mismo resultado con transform.

No animes demasiados elementos a la vez

Una animación aislada puede ser ligera. Cien elementos animándose al mismo tiempo pueden no serlo.

Cuidado con sombras y filtros

box-shadow, filter y efectos visuales complejos pueden ser útiles, pero conviene medir su impacto.

Usa transition cuando solo haya dos estados

Si el cambio es de un estado inicial a uno final, normalmente una transición es suficiente.

.element {
  transition: transform 0.25s ease;
}

Usa animation cuando necesites una secuencia

Si necesitas varios pasos, repetición o control mediante @keyframes, entonces sí tiene sentido usar animaciones CSS.

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

Respeta prefers-reduced-motion

No todas las personas quieren o pueden ver movimiento en pantalla. Ofrece una experiencia alternativa.

Mide antes de complicar

No añadas will-change, trucos o soluciones avanzadas sin comprobar antes si existe un problema real.

Errores comunes al animar propiedades CSS

Animar todo “porque queda moderno”

Una web no es mejor por tener más movimiento. Una animación debería tener una función: guiar, confirmar, explicar, suavizar o dar feedback.

Usar transition: all

Aunque es cómodo, transition: all puede generar problemas porque el navegador intentará transicionar cualquier propiedad que cambie.

.card {
  transition: all 0.3s ease;
}

Es mejor especificar exactamente qué propiedades quieres animar:

.card {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

Esto hace que el código sea más predecible y evita animaciones accidentales.

Confundir movimiento visual con cambio de layout

Si solo quieres que algo “parezca” moverse, probablemente necesitas transform, no top, left o margin.

Crear animaciones demasiado largas

Una animación de interfaz no debería hacer esperar al usuario. Si cada interacción tarda demasiado en completarse, la experiencia se vuelve pesada.

No probar en móvil

Una animación que funciona bien en escritorio puede sentirse lenta en un móvil de gama media o baja. Por eso es importante probar en dispositivos reales siempre que sea posible.

Preguntas frecuentes sobre animaciones CSS y rendimiento

¿Qué propiedades CSS conviene animar para mejorar el rendimiento?

Las propiedades más recomendadas son transform y opacity. transform es ideal para mover, escalar o rotar elementos, mientras que opacity funciona muy bien para apariciones y desapariciones suaves. Ambas suelen ser más eficientes porque no obligan al navegador a recalcular el layout de la página.

¿Es malo animar width y height?

No siempre es “malo”, pero sí suele ser menos recomendable desde el punto de vista del rendimiento. Animar width o height puede provocar recalculos de layout, especialmente si el elemento afecta a otros elementos de la página. Cuando el objetivo es crear una sensación visual de crecimiento, normalmente es mejor usar transform: scale().

¿Debo usar siempre will-change para optimizar animaciones CSS?

No. will-change debe usarse con cuidado y solo cuando exista una necesidad real. Aplicarlo sin medir o usarlo en demasiados elementos puede aumentar el consumo de memoria y empeorar el rendimiento. Antes de usarlo, conviene elegir bien las propiedades animadas, probar la animación y analizar si realmente hay un problema.

Movimiento con intención: la clave de una buena animación CSS

Las animaciones CSS no deberían estar ahí solo para decorar. Una buena animación tiene intención. Ayuda a entender un cambio, suaviza una interacción, guía la mirada o confirma que una acción ha ocurrido.

Desde el punto de vista del rendimiento, la mejor estrategia suele ser sencilla: animar menos, pero mejor. Elegir transform y opacity como primeras opciones, evitar propiedades que provoquen layout, usar sombras y filtros con moderación, respetar las preferencias de movimiento reducido y medir cuando algo no se siente fluido.

Optimizar animaciones CSS no significa renunciar al diseño. Significa diseñar con más criterio. Porque una interfaz bien animada no es la que más se mueve, sino la que se mueve justo lo necesario para que la experiencia sea más clara, más ligera y más humana.

Animaciones CSS: guía básica para empezar desde cero

Posted on by marta

Las animaciones CSS son una de esas herramientas que pueden transformar una interfaz sencilla en una experiencia más clara, fluida y agradable. Pero también pueden convertirse en ruido visual si se usan sin intención. Por eso, antes de empezar a añadir movimiento a botones, tarjetas, menús o ilustraciones, conviene entender algo importante: animar con CSS no consiste en decorar por decorar, sino en acompañar al usuario.

Una buena animación puede ayudar a explicar qué está pasando en una interfaz. Puede indicar que un botón es interactivo, que un menú se ha abierto, que una tarjeta ha cambiado de estado o que una acción se ha completado correctamente. En cambio, una animación excesiva, lenta o mal planteada puede aumentar la carga cognitiva, distraer y empeorar la experiencia.

En esta guía básica sobre animaciones CSS vamos a ver desde cero qué son, cuándo usarlas, qué diferencia hay entre transition y animation, cómo funcionan los @keyframes, qué propiedades conviene animar y qué buenas prácticas deberías tener presentes si quieres crear animaciones web útiles, accesibles y mantenibles.

La idea de este artículo es que funcione como un post pilar: una página central desde la que puedas entender los conceptos principales y, después, profundizar en temas concretos como microinteracciones, efectos hover, menús animados, loaders, animaciones accesibles o ilustraciones CSS más complejas. Si también te interesa la parte más visual del CSS, puedes complementar esta guía con el artículo sobre cómo dibujar formas básicas con CSS.

Qué son las animaciones CSS

Las animaciones CSS permiten modificar visualmente uno o varios estilos de un elemento a lo largo del tiempo. En lugar de que un cambio ocurra de forma brusca, puedes hacer que ese cambio sea progresivo.

Por ejemplo, imagina un botón que cambia de color cuando pasas el ratón por encima. Sin animación, el color cambia de golpe. Con una transición, ese cambio puede hacerse de forma suave:

.button {
  background-color: #cc2b5e;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #753a88;
}

Este pequeño detalle ya mejora la percepción de la interfaz. El usuario siente que el elemento responde de forma más natural.

CSS permite crear movimiento principalmente de dos formas: mediante transiciones y mediante animaciones con @keyframes. Las transiciones sirven para animar el cambio entre dos estados de un elemento, por ejemplo un estado normal y un estado :hover. Las animaciones con @keyframes, en cambio, permiten definir varios pasos intermedios dentro de una secuencia más controlada.

Por qué usar animaciones CSS en una web

Las animaciones no deberían estar ahí solo porque “quedan bonitas”. En diseño de interfaces, el movimiento tiene sentido cuando ayuda a comunicar mejor.

Una animación puede cumplir varias funciones dentro de una web:

  • Dar feedback visual.
  • Guiar la atención del usuario.
  • Explicar una relación entre elementos.
  • Suavizar cambios de estado.
  • Hacer que una interfaz se sienta más cuidada.
  • Reforzar la personalidad visual de una marca.

Por ejemplo, una tarjeta que se eleva ligeramente al pasar el cursor comunica que es clicable. Un panel que aparece desde un lateral ayuda a entender de dónde viene ese contenido. Un icono que gira al abrir un acordeón indica que algo ha cambiado de estado.

Ahora bien, también hay que tener cuidado. Si todo se mueve, nada destaca. Una web llena de efectos puede generar cansancio visual y hacer que el usuario tarde más en decidir qué hacer. Aquí conviene pensar en algo muy relacionado con la experiencia de usuario: la diferencia entre captar la atención y aumentar la carga cognitiva. Una animación útil reduce fricción. Una animación innecesaria puede añadir ruido.

Si quieres profundizar más en cómo las decisiones visuales afectan a la comprensión de una interfaz, te puede interesar el artículo sobre HTML semántico y accesibilidad web, porque muchas veces la claridad de una interfaz empieza mucho antes de añadir movimiento.

Transiciones CSS: el primer paso para animar con CSS

Las transiciones CSS son la forma más sencilla de empezar a animar con CSS. Sirven para suavizar el cambio entre dos valores de una propiedad.

Cómo funciona una transición

Una transición necesita, como mínimo, dos cosas: una propiedad que vaya a cambiar y una duración para ese cambio.

.card {
  transform: translateY(0);
  transition: transform 0.25s ease;
}

.card:hover {
  transform: translateY(-8px);
}

Aquí estamos diciendo que la tarjeta parte de su posición original y, cuando el usuario pasa el cursor por encima, se desplaza ligeramente hacia arriba. Ese cambio no sucede de golpe, sino durante 0.25s.

La propiedad transition es una forma abreviada de declarar varias cosas a la vez: qué propiedad se anima, cuánto dura, qué curva de aceleración utiliza y si tiene retraso.

Propiedades principales de transition

Cuando trabajes con transiciones, estas son las propiedades que más vas a utilizar:

.element {
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

También puedes escribirlo de forma abreviada:

.element {
  transition: transform 0.3s ease 0s;
}

La propiedad transition-property indica qué propiedad se va a animar. transition-duration define la duración. transition-timing-function controla el ritmo de la animación. Y transition-delay permite retrasar el inicio.

Cuándo usar transition

Usa transition cuando quieras animar un cambio sencillo entre dos estados. Es ideal para efectos :hover, estados :focus, botones, tarjetas, enlaces, cambios de color, cambios de opacidad o pequeños desplazamientos.

.link {
  color: #020101;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}

.link:hover {
  color: #cc2b5e;
  text-decoration-thickness: 3px;
}

Este tipo de microinteracción puede mejorar mucho la experiencia sin añadir complejidad. Además, es una buena puerta de entrada si estás empezando a animar con CSS.

Animaciones CSS con @keyframes

Cuando necesitas más control que una simple transición, entran en juego las animaciones con @keyframes.

Una animación CSS se compone de dos partes principales: una regla @keyframes, donde defines los pasos de la animación, y una propiedad animation, donde aplicas esa animación a un elemento.

Qué es @keyframes

La regla @keyframes define cómo cambia un elemento durante una animación. Puedes usar from y to, o porcentajes como 0%, 50% y 100%.

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-title {
  animation: fadeIn 0.6s ease-out both;
}

En este caso, el título aparece progresivamente y sube ligeramente desde abajo. Es una animación típica para introducir contenido en pantalla.

Diferencia entre from/to y porcentajes

Puedes escribir una animación sencilla así:

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

Pero si necesitas más control, puedes usar porcentajes:

@keyframes bounceSoft {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

Los porcentajes permiten definir puntos intermedios. Esto es útil para animaciones más elaboradas, como rebotes, loaders, entradas escalonadas o pequeños efectos decorativos.

Propiedades principales de animation

La propiedad animation también puede escribirse de forma abreviada. Agrupa propiedades como animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode y animation-play-state.

.badge {
  animation: pulse 1.5s ease-in-out infinite;
}

Aquí estamos diciendo que el elemento usará la animación pulse, durará 1.5s, tendrá una curva ease-in-out y se repetirá infinitamente.

La versión extendida sería:

.badge {
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

Transition vs animation: cuándo usar cada una

Una de las dudas más habituales al empezar con CSS animation es cuándo usar transition y cuándo usar animation.

Usa transition cuando hay un cambio de estado

Las transiciones son perfectas cuando el elemento cambia como respuesta a una interacción o a una clase añadida con JavaScript.

.menu {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.menu.is-open {
  opacity: 1;
  transform: translateY(0);
}

Aquí el menú cambia entre cerrado y abierto. La transición suaviza ese cambio.

Usa animation cuando necesitas una secuencia propia

Las animaciones con @keyframes son más adecuadas cuando el movimiento tiene una secuencia definida que no depende únicamente de un cambio entre dos estados.

Por ejemplo, usarías animation para crear un loader, un icono que pulsa, una ilustración animada, una entrada de contenido o una animación que se repite.

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.loader {
  animation: rotate 1s linear infinite;
}

En resumen: si solo necesitas suavizar un cambio, usa transition; si necesitas definir una secuencia, usa animation y @keyframes.

Propiedades recomendadas para animar

No todas las propiedades CSS se comportan igual cuando las animas. Algunas son más eficientes y otras pueden afectar al rendimiento de la página.

Prioriza transform y opacity

Cuando sea posible, conviene animar transform y opacity. Son dos propiedades especialmente útiles porque permiten crear muchos efectos visuales sin obligar al navegador a recalcular constantemente la estructura de la página.

.element {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

Con transform puedes crear desplazamientos, escalados, rotaciones e inclinaciones:

.box:hover {
  transform: translateY(-6px) scale(1.02);
}

Con opacity puedes crear apariciones y desapariciones suaves:

.tooltip {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tooltip.is-visible {
  opacity: 1;
}

Evita animar propiedades costosas

Siempre que puedas, evita animar propiedades como width, height, top, left, margin o padding. No significa que estén prohibidas, pero sí que deberías usarlas con cuidado.

Por ejemplo, en lugar de animar top, suele ser mejor animar transform: translateY().

Menos recomendable:

.modal {
  top: -40px;
  transition: top 0.3s ease;
}

.modal.is-open {
  top: 0;
}

Mejor:

.modal {
  transform: translateY(-40px);
  transition: transform 0.3s ease;
}

.modal.is-open {
  transform: translateY(0);
}

Visualmente el resultado puede ser parecido, pero la segunda opción suele ser más eficiente y más fácil de mantener.

Curvas de animación: el papel del easing

La duración de una animación importa, pero el ritmo también. Ahí entra en juego el concepto de easing, que define cómo progresa la animación a lo largo del tiempo.

No es lo mismo una animación completamente lineal que una animación que empieza despacio, acelera y termina suavemente.

Valores habituales de timing-function

Algunos valores comunes son:

.element {
  transition-timing-function: ease;
}
.element {
  transition-timing-function: linear;
}
.element {
  transition-timing-function: ease-in;
}
.element {
  transition-timing-function: ease-out;
}
.element {
  transition-timing-function: ease-in-out;
}

Cuándo usar cada curva

Para interfaces, ease y ease-out suelen funcionar bien en muchas situaciones porque hacen que el movimiento se sienta más natural.

  • linear: útil para loaders o rotaciones constantes.
  • ease: buena opción general.
  • ease-in: empieza lento y termina más rápido.
  • ease-out: empieza rápido y termina suave.
  • ease-in-out: suaviza tanto la entrada como la salida.
.toast {
  animation: slideIn 0.35s ease-out both;
}

En una notificación, ease-out suele tener sentido porque queremos que aparezca con cierta agilidad y se asiente de forma suave.

Ejemplos básicos de animaciones CSS

Veamos algunos ejemplos prácticos que puedes usar como punto de partida. La idea no es copiar y pegar sin pensar, sino entender el patrón para adaptarlo después a tus propios componentes.

Botón con hover suave

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  background: #cc2b5e;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  background: #753a88;
}

Este patrón es sencillo, pero muy útil. El botón responde visualmente sin resultar exagerado.

Tarjeta que aparece al cargar

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: cardEnter 0.5s ease-out both;
}

Aquí usamos both para que el elemento conserve los estilos del primer y último fotograma cuando corresponda.

Loader circular

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loader {
  width: 2rem;
  height: 2rem;
  border: 3px solid #f8e0ea;
  border-top-color: #cc2b5e;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

En este caso, linear tiene sentido porque queremos una rotación constante.

Aparición escalonada de elementos

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.list-item {
  animation: fadeUp 0.45s ease-out both;
}

.list-item:nth-child(2) {
  animation-delay: 0.1s;
}

.list-item:nth-child(3) {
  animation-delay: 0.2s;
}

.list-item:nth-child(4) {
  animation-delay: 0.3s;
}

Este recurso es útil para listas, grids de tarjetas o bloques de contenido. Eso sí: úsalo con moderación. Si una página tiene muchos elementos y todos aparecen con retraso, la experiencia puede volverse lenta.

Si estás trabajando con ilustraciones CSS, este tipo de animaciones también puede combinarse con técnicas como pseudo-elementos o recortes visuales. En ese caso, puedes ampliar el tema con el artículo sobre pseudo-elementos en CSS o con la guía sobre clip-path en CSS.

Accesibilidad en animaciones CSS

La accesibilidad es un punto fundamental cuando hablamos de animaciones web. No todas las personas perciben el movimiento de la misma manera. Para algunos usuarios, ciertas animaciones pueden provocar mareo, incomodidad o dificultad para concentrarse.

Por eso, CSS ofrece la media feature prefers-reduced-motion, que permite detectar si una persona ha activado en su sistema una preferencia para reducir el movimiento no esencial.

Cómo usar prefers-reduced-motion

Una forma habitual de aplicarlo es reducir o eliminar animaciones cuando el usuario ha indicado esa preferencia:

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

Este enfoque es bastante global. En proyectos reales, también puedes crear alternativas más cuidadas en lugar de eliminar todo de golpe.

@media (prefers-reduced-motion: reduce) {
  .hero-title {
    animation: none;
  }

  .card:hover {
    transform: none;
  }
}

Animar no debería bloquear la comprensión

Una animación accesible debería cumplir estas ideas:

  • No debe ser imprescindible para entender el contenido.
  • No debe impedir usar la interfaz.
  • No debe ejecutarse de forma infinita sin motivo.
  • No debe parpadear agresivamente.
  • No debe generar desplazamientos inesperados.
  • Debe poder reducirse si el usuario lo necesita.

Una buena regla práctica es esta: si quitas la animación, la interfaz debería seguir funcionando y entendiéndose perfectamente.

También es importante no olvidar los estados de teclado. Si una animación acompaña el estado :hover, muchas veces debería contemplar también :focus-visible. Puedes profundizar en esta parte en el artículo sobre focus visible y navegación con teclado.

Buenas prácticas para crear animaciones CSS

Crear buenas animaciones no depende solo de saber escribir @keyframes. También implica criterio visual, intención de diseño y cuidado técnico.

1. Empieza con movimientos pequeños

Cuando estás empezando, es fácil pasarse. Una tarjeta no necesita volar por la pantalla para comunicar que es interactiva. A menudo basta con un pequeño cambio de opacidad, color o posición.

.card:hover {
  transform: translateY(-4px);
}

Un movimiento pequeño suele sentirse más elegante y menos invasivo.

2. Usa duraciones cortas

En interfaces, muchas animaciones funcionan bien entre 150ms y 400ms. No es una regla absoluta, pero sí un buen punto de partida.

  • Microinteracciones: 150ms–250ms.
  • Entradas de elementos: 300ms–500ms.
  • Animaciones decorativas: depende del caso, pero conviene usarlas con cuidado.

Una animación demasiado rápida puede pasar desapercibida. Una demasiado lenta puede hacer que la web parezca pesada.

3. Mantén consistencia

Si cada botón, tarjeta y modal usa una duración diferente, la interfaz puede sentirse caótica. Es mejor definir un pequeño sistema de tiempos:

:root {
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-base: ease;
}

Y después reutilizarlo:

.button {
  transition: transform var(--duration-base) var(--ease-base);
}

Esto ayuda a que el proyecto sea más mantenible.

4. No animes todo

Una web con demasiadas animaciones puede parecer menos profesional. El movimiento debe tener jerarquía. Antes de añadir una animación, pregúntate si ayuda a entender algo, si aporta feedback, si guía la atención o si simplemente está ahí porque se puede hacer.

Si no cumple ninguna función clara, probablemente sobra.

Errores comunes al empezar con CSS animation

Cuando empiezas a trabajar con CSS animation, es normal cometer algunos errores. Lo importante es detectarlos pronto para que las animaciones no perjudiquen la experiencia.

Animar propiedades equivocadas

Uno de los errores más frecuentes es animar propiedades que afectan al layout cuando podrías usar transform.

Menos recomendable:

.box:hover {
  width: 120%;
}

Mejor:

.box:hover {
  transform: scale(1.05);
}

Usar infinite sin necesidad

Las animaciones infinitas deben reservarse para casos concretos, como loaders o pequeños indicadores de actividad. Si un elemento decorativo se mueve todo el tiempo, puede distraer mucho.

.icon {
  animation: pulse 1s infinite;
}

Antes de usar algo así, pregúntate si realmente necesita repetirse siempre.

Crear animaciones demasiado largas

Una animación larga puede parecer elegante en una demo, pero molesta en una interfaz real. El usuario no quiere esperar a que la web termine de “presentarse” para poder interactuar.

Olvidar el estado focus

Muchas veces se anima :hover, pero se olvida :focus-visible. Esto deja fuera a quienes navegan con teclado.

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

Las animaciones también deben acompañar la accesibilidad de la interacción, no solo el uso con ratón.

Cómo organizar animaciones CSS en un proyecto real

Cuando un proyecto crece, conviene evitar animaciones sueltas y repetidas por todo el CSS. Puedes crear una pequeña arquitectura de movimiento para que todo sea más coherente.

Variables para tiempos y curvas

:root {
  --motion-duration-fast: 150ms;
  --motion-duration-base: 250ms;
  --motion-duration-slow: 400ms;

  --motion-ease-standard: ease;
  --motion-ease-enter: ease-out;
  --motion-ease-exit: ease-in;
}

Clases reutilizables

.animate-fade-up {
  animation: fadeUp var(--motion-duration-slow) var(--motion-ease-enter) both;
}

.transition-base {
  transition-duration: var(--motion-duration-base);
  transition-timing-function: var(--motion-ease-standard);
}

Keyframes centralizados

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Este enfoque hace que las animaciones sean más coherentes y fáciles de ajustar. Si más adelante decides que las entradas son demasiado lentas, puedes cambiar una variable en lugar de revisar decenas de componentes.

Una nota sobre diseño responsive

También conviene probar las animaciones en distintos tamaños de pantalla. Un desplazamiento que se ve sutil en escritorio puede sentirse excesivo en móvil. Si trabajas mucho con composición visual en CSS, te recomiendo revisar también el artículo sobre cómo adaptar ilustraciones CSS a distintos tamaños de pantalla.

Animaciones CSS como parte de una estrategia de contenidos

Este artículo está pensado como una guía base sobre animaciones CSS, pero el tema da para mucho más. Por eso tiene sentido usarlo como página central de un cluster de contenidos.

Desde aquí puedes enlazar, por ejemplo, a artículos más específicos sobre:

  • Cómo usar transition en CSS.
  • Cómo crear animaciones con @keyframes.
  • Efectos hover modernos con CSS.
  • Animaciones CSS para botones.
  • Cómo animar menús responsive.
  • Loaders CSS sin JavaScript.
  • Animaciones accesibles con prefers-reduced-motion.
  • Errores de rendimiento al animar con CSS.
  • Microinteracciones CSS para mejorar la UX.
  • Diferencias entre animaciones CSS y animaciones JavaScript.

Esta estructura ayuda tanto al usuario como al SEO. El usuario encuentra una ruta de aprendizaje clara. Y Google puede entender mejor la relación semántica entre los artículos del sitio.

Un post pilar no debería intentar resolver todos los temas con profundidad extrema. Su función es ordenar el mapa, explicar los conceptos base y derivar hacia contenidos complementarios más concretos.

Preguntas frecuentes sobre animaciones CSS

¿Qué diferencia hay entre transition y animation en CSS?

transition sirve para suavizar el cambio entre dos estados de un elemento, por ejemplo cuando un botón pasa de su estado normal a :hover. animation, en cambio, permite crear una secuencia más completa mediante @keyframes, con pasos intermedios, repeticiones, retrasos y mayor control.

¿Qué propiedades CSS conviene animar?

Siempre que sea posible, conviene animar transform y opacity, porque suelen ser más eficientes para el navegador. Con transform puedes crear desplazamientos, escalados y rotaciones. Con opacity puedes controlar apariciones y desapariciones suaves.

¿Las animaciones CSS son mejores que las animaciones con JavaScript?

No siempre. Las animaciones CSS son ideales para microinteracciones, transiciones sencillas, loaders básicos y efectos visuales ligados a estilos. JavaScript puede ser más adecuado cuando necesitas controlar una animación de forma dinámica, responder a eventos complejos, sincronizar estados o crear interacciones avanzadas. La mejor opción depende del problema que quieras resolver.

Movimiento con intención

Las animaciones CSS son una herramienta poderosa, pero su valor no está en el movimiento por sí mismo. Su valor está en cómo ese movimiento ayuda a que una interfaz se entienda mejor.

Una buena animación no interrumpe. No compite con el contenido. No obliga al usuario a esperar. Simplemente acompaña: guía la mirada, suaviza los cambios, refuerza la interacción y hace que la experiencia se sienta más cuidada.

Si estás empezando desde cero, no necesitas memorizar todas las propiedades de golpe. Empieza con transition, practica con transform y opacity, crea tus primeros @keyframes y observa cómo cambia la percepción de una interfaz cuando el movimiento tiene intención.

Animar con CSS no es añadir efectos porque sí. Es tomar decisiones pequeñas, pero importantes, sobre cómo se comporta una web. Y cuando esas decisiones están bien pensadas, las animaciones dejan de ser un adorno para convertirse en parte de la experiencia de usuario.