Animación en UI: duraciones, curvas de easing y coreografía que se sienten naturales

Una de las primeras cosas que hago al revisar una interfaz nueva es abrir y cerrar el menú cinco veces seguidas. Parece una tontería, pero dice muchísimo. Si el panel tarda casi un segundo en aparecer, a la tercera vez ya molesta. Si aparece de golpe, la pantalla «salta» y cuesta entender de dónde ha salido. Y si se desliza con una curva lineal, se siente como un ascensor viejo. Cuando está bien resuelto, nadie lo comenta: simplemente se siente bien.

La animación en UI tiene esa paradoja. Su mejor versión pasa desapercibida, porque su trabajo es explicar cambios, no llamar la atención. Para conseguirlo no hace falta talento mágico: hace falta conocer tres herramientas (duración, curva y coreografía), aplicarlas con un poco de criterio y escribirlas en un sistema para que todo el producto se mueva con la misma voz.

En esta guía vamos a lo concreto: rangos en milisegundos, curvas que funcionan, cómo ordenar varios elementos que se mueven a la vez y cómo implementarlo en CSS sin castigar el rendimiento ni a quien prefiere menos movimiento. Si lo que buscas es el porqué de esos pequeños detalles de feedback, en la guía de microinteracciones lo contamos desde la experiencia de uso.

01Para qué sirve el movimiento en una interfaz

Antes de abrir el panel de animación conviene preguntarse qué problema resuelve el movimiento. En interfaces, casi siempre es uno de estos:

• →Continuidad espacial. Un panel que se desliza desde la derecha le dice al cerebro que «está» a la derecha y que se puede volver. Sin ese movimiento, la persona tiene que reconstruir mentalmente dónde está.
• →Relación causa-efecto. Pulsas «añadir al carrito» y un pequeño punto vuela hasta el icono del carrito. Has entendido dónde ha ido tu producto sin leer nada.
• →Feedback. El botón se hunde ligeramente al pulsarlo, el interruptor se desliza, el campo tiembla si el dato no es válido. Confirmaciones inmediatas de que la interfaz te ha oído.
• →Jerarquía en el tiempo. Al cargar una pantalla, lo importante aparece primero y lo secundario después. El orden de aparición guía la mirada.
• →Carácter. Una marca puede moverse con calma o con energía, con rebote o con precisión. El movimiento también es identidad.

Los cuatro primeros son funcionales y deberían estar en cualquier producto. El quinto es el condimento, y funciona mejor cuando se apoya en los anteriores en vez de añadirse aparte.

02Duraciones: rangos que funcionan

La percepción humana del tiempo en interfaces está bastante estudiada. Los trabajos clásicos de Card, Moran y Newell, que Jakob Nielsen popularizó en sus límites de tiempo de respuesta, sitúan en torno a 100 ms el umbral por debajo del cual una respuesta se percibe como instantánea. Nielsen Norman Group recomienda que la mayoría de animaciones de interfaz se muevan entre 100 y 500 ms. Con esas dos referencias, esta es la tabla con la que arrancamos en el estudio:

Hay tres matices que marcan la diferencia:

1. 01La distancia manda. Un elemento que recorre 40 px necesita menos tiempo que uno que cruza toda la pantalla. Material Design recomendaba, en su segunda versión, alargar alrededor de un 30 % las transiciones en tablet respecto a móvil, precisamente porque las distancias son mayores.
2. 02Las salidas, más rápidas que las entradas. Cuando algo aparece, la persona quiere verlo; cuando algo se va, ya ha decidido y quiere seguir. Un modal que entra en 300 ms puede salir en 200.
3. 03La frecuencia acorta. Una animación que se ve cien veces al día (abrir el menú, cambiar de pestaña) debería estar en la parte baja del rango. Una que se ve una vez (la celebración al terminar el registro) puede permitirse más.

03Curvas de easing: cómo se reparte la velocidad

Duración y curva van siempre juntas. La curva de easing describe cómo cambia la velocidad durante la animación, y es lo que hace que un movimiento parezca físico o mecánico.

Las cuatro curvas básicas

• →Lineal. Velocidad constante. Funciona para cosas que no imitan objetos físicos: una barra de progreso, un spinner que gira, un cambio de color. Para desplazamientos se siente robótica.
• →Ease-out (deceleración). Arranca rápido y frena al final. Es la curva por defecto para todo lo que entra en pantalla: el elemento responde enseguida y se posa con suavidad.
• →Ease-in (aceleración). Arranca lento y acelera. Es la curva de lo que sale: el elemento coge impulso y se va. Usada en entradas, da sensación de retraso.
• →Ease-in-out. Acelera y frena. Para elementos que se mueven de un punto a otro dentro de la pantalla sin entrar ni salir, como una tarjeta que cambia de posición.

Curvas con más carácter

Las palabras clave de CSS (ease, ease-out…) son correctas pero suaves. Para un movimiento más expresivo se definen curvas propias con cubic-bezier(). Material Design 3, por ejemplo, documenta su curva estándar como cubic-bezier(0.2, 0, 0, 1) y una variante enfática de deceleración como cubic-bezier(0.05, 0.7, 0.1, 1), que llega muy rápido a su destino y se toma su tiempo para asentarse. Son buenas referencias para empezar y ajustar después a tu marca.

Apple, por su parte, construye gran parte del movimiento de iOS con animaciones de muelle (spring), definidas por rigidez y amortiguación en vez de por una curva. Su ventaja es que se pueden interrumpir y retomar con naturalidad, algo muy valioso en interfaces táctiles donde el dedo puede cambiar de idea a mitad de gesto. En la web, CSS ya permite aproximarlas con la función linear(), que dibuja curvas arbitrarias a base de puntos, y las librerías como Motion las resuelven de forma nativa.

Rebote, con medida

Un pequeño rebote al final (overshoot) da alegría y es muy de marca. En una app de juegos o en una celebración puede ser perfecto; en un panel de facturación cansa pronto. Si lo usas, que el exceso sea pequeño (un 5–10 % más allá del destino) y que se reserve para momentos concretos.

04Coreografía: cuando se mueven varias cosas a la vez

Una pantalla rara vez anima un solo elemento. Al abrir un panel aparecen el fondo oscurecido, el propio panel y su contenido. Al cargar una lista entran diez tarjetas. Coreografiar es decidir quién va primero, cómo se relacionan y cuánto tiempo los separa.

Principios de coreografía

1. 01Un protagonista por transición. El ojo solo puede seguir bien un movimiento principal. El resto acompaña con fundidos o desplazamientos cortos.
2. 02El orden sigue la jerarquía. Primero el contenedor, después el título, después el contenido, después las acciones secundarias.
3. 03Escalonado breve. Cuando entran varios elementos parecidos, un retardo de 20 a 50 ms entre cada uno crea sensación de cascada. Más allá de 60–80 ms empieza a parecer lento.
4. 04Tope al escalonado. Si hay veinte elementos, anima los cinco o seis primeros con retardo y deja que el resto aparezca con el último. Nadie debería esperar un segundo a ver la décima tarjeta.
5. 05Dirección coherente. Si los paneles de detalle entran por la derecha, vuelven por la derecha. La interfaz construye un mapa mental y el movimiento lo refuerza.
6. 06Elementos compartidos. Si una miniatura se convierte en la imagen grande de la ficha, que sea el mismo elemento creciendo. Es una de las transiciones que mejor explican una navegación.

Las transiciones de elemento compartido, que antes exigían bastante JavaScript, hoy se pueden hacer en la web con la View Transitions API, ya disponible en los navegadores principales para transiciones dentro de la misma página y extendiéndose a la navegación entre páginas.

05Cómo llevarlo a código

La forma más sostenible de trabajar es convertir duraciones y curvas en tokens, igual que los colores o los espaciados. Así el diseño en Figma y el código hablan el mismo idioma, como explicamos en la guía de design tokens.

:root {
  --dur-instant: 100ms;
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 350ms;
  --dur-page: 450ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
}
.drawer {
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-exit);
}
.drawer[data-open="true"] {
  transform: translateX(0);
  transition: transform var(--dur-slow) var(--ease-enter);
}
.list-item {
  animation: aparecer var(--dur-base) var(--ease-enter) both;
  animation-delay: calc(min(var(--i), 6) * 35ms);
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(8px); }
}

Fíjate en dos detalles. La transición se define en ambos estados para que la entrada y la salida tengan duración y curva propias. Y el escalonado usa una variable --i con el índice del elemento, con un tope de seis para que la cascada no se alargue.

Rendimiento: qué propiedades animar

Para que una animación vaya a 60 fotogramas por segundo, el navegador tiene unos 16 ms para pintar cada fotograma. Si animas propiedades que cambian el tamaño o la posición en el flujo (width, height, top, left, margin), obligas a recalcular el layout de la página en cada fotograma, y en un móvil medio eso se nota. Las propiedades transform y opacity se pueden resolver en la capa de composición, normalmente en la GPU, sin tocar el layout. La documentación de rendimiento de web.dev lo explica con detalle.

En la práctica:

• →Para mover, transform: translate(). Para crecer, transform: scale(). Para aparecer, opacity.
• →Para animar una altura automática (un acordeón), CSS moderno ya permite interpolate-size: allow-keywords en algunos navegadores; mientras tanto, la técnica de grid-template-rows de 0fr a 1fr funciona muy bien.
• →will-change solo en elementos que de verdad van a animarse, y mejor justo antes de hacerlo, porque cada capa extra consume memoria.

Una animación pesada en el momento de la carga también puede afectar al INP (Interaction to Next Paint, la métrica de Core Web Vitals que mide la respuesta a las interacciones; el objetivo es 200 ms o menos) si bloquea el hilo principal mientras la persona intenta pulsar algo.

Movimiento reducido

Algunas personas experimentan mareo, náuseas o dolor de cabeza con ciertos movimientos en pantalla, sobre todo desplazamientos grandes, zooms y parallax. Los sistemas operativos tienen una opción para reducir el movimiento, y la web puede leerla:

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

El bloque genérico es una red de seguridad. Lo ideal es diseñar la alternativa de cada animación importante: el drawer, en vez de deslizarse, aparece con un fundido breve. Reducir movimiento no significa quitar el feedback, sino cambiar desplazamiento por opacidad.

WCAG 2.2 recoge dos criterios relacionados: el 2.2.2 pide que cualquier contenido que se mueva automáticamente durante más de cinco segundos se pueda pausar, detener u ocultar, y el 2.3.3 (nivel AAA) pide que las animaciones disparadas por interacción se puedan desactivar. Respetar prefers-reduced-motion cubre buena parte de ambos. Lo desarrollamos más en la guía de accesibilidad web.

06Un sistema de movimiento en seis pasos

Cuando diseñamos el movimiento de un producto, lo organizamos así:

1. 01Inventario de momentos. Lista de todo lo que cambia: aperturas, cierres, cargas, confirmaciones, errores, navegación.
2. 02Personalidad. Dos o tres adjetivos de movimiento coherentes con la marca (preciso y sereno, ágil y cálido…). Ellos deciden si hay rebote, cuánto y dónde.
3. 03Escala de duraciones. Cinco o seis valores con nombre, no más. Cuantos menos valores, más coherente se siente el producto.
4. 04Curvas. Una estándar, una de entrada, una de salida y, si la marca lo pide, una expresiva para momentos especiales.
5. 05Reglas de coreografía. Direcciones, orden, escalonado máximo y qué elementos son compartidos entre pantallas.
6. 06Alternativas de movimiento reducido para cada patrón principal.

Todo esto cabe en una página del sistema de diseño, y es lo que permite que dentro de un año alguien añada una pantalla nueva y se mueva igual que las demás. Cuando el movimiento sale de la interfaz y se convierte en pieza de marca (un logotipo animado, un vídeo, una cabecera ilustrada que cobra vida), entra en el terreno del motion design, con otros tiempos y otras reglas.

Mover bien una interfaz es una mezcla de medida y sensibilidad: los números te llevan al rango correcto y el ojo, probando una y otra vez, encuentra el punto exacto. En SIMA lo trabajamos dentro del diseño web y de experiencia digital, con prototipos que se pueden tocar antes de escribir una línea de producción. Si quieres que tu producto se mueva con la misma voz que tu marca, escríbenos.