Animación en la interfaz: cuándo ayuda y cómo reducirla

Anima un elemento cuando el movimiento explica algo: que la acción se recibió, que la pantalla cambió de estado o adónde fue la persona. La mayoría de las transiciones cabe entre 100 y 400 milisegundos (NN/g, Executing UX Animations (en inglés)). Quien activó la opción de reducir movimiento en su sistema debe ver la página sin deslizamientos, y el CSS detecta ese pedido con prefers-reduced-motion.

Para qué sirve la animación

El ojo humano es muy sensible al movimiento, sobre todo en el borde de la visión. Esa es la fuerza y el riesgo de la animación. Un artículo de NN/g de 2020 separa los usos en los que esa atención robada vale la pena (NN/g, The Role of Animation and Motion in UX (en inglés)):

Respuesta a la acción. Un menú que se desliza después del toque confirma que el toque funcionó.
Cambio de estado. Un lápiz que se transforma en un disquete muestra el paso de editar a guardar.
Sentido de lugar. Acercar y alejar ayuda a entender si bajaste o subiste un nivel de contenido.
Pista de uso. Un panel que sube desde abajo sugiere que se cierra arrastrándolo hacia abajo.

El mismo artículo muestra una tienda en la que faltó animación. El número del carrito cambia solo, pequeño y lejos del botón de compra. La persona no ve el cambio y puede terminar agregando el mismo producto dos veces.

La respuesta tiene que llegar rápido para parecer consecuencia del clic. Un texto de NN/g de 2014 pone ese límite en 0,1 segundos entre la acción y el inicio del efecto (NN/g, Animation for Attention and Comprehension (en inglés)).

Cuándo estorba

El movimiento sin función se vuelve distracción. El artículo de 2020 da el ejemplo de un garabato que se mueve junto al texto sin aportar nada, y de un reloj parpadeante que anuncia el fin de una oferta falsa. El segundo caso ya es manipulación, porque usa el miedo a perderse algo para empujar la compra (NN/g (en inglés)).

La repetición también cobra. En las pruebas de NN/g, una queja común es que la animación fue linda la primera vez y molesta a partir de la segunda (NN/g (en inglés)). El ejemplo del texto es un menú escondido que solo aparece al final de una secuencia larga, repetida en cada uso, sin forma de saltarla.

El tipo de movimiento cambia cuánto llama la atención. Un elemento que entra deslizándose atrae la mirada más rápido que uno que solo aparece poco a poco, sin cambiar de lugar (NN/g (en inglés)). Para algo que la persona tiene que notar ya, el deslizamiento sirve. Para una función de apoyo, la aparición suave molesta menos.

Cuánto debe durar

El artículo de NN/g sobre ejecución da los rangos de referencia (NN/g, Executing UX Animations (en inglés)):

Unos 100 ms para una respuesta simple, como marcar una casilla o mover un interruptor.
De 200 a 300 ms para un cambio grande en pantalla, como una ventana que entra.
400 ms ya es lento, aceptable solo para movimientos largos en pantallas grandes.
Desde 500 ms, la animación empieza a sentirse como espera.

Dos reglas completan la lista en el mismo texto. Salir puede ser un poco más rápido que entrar, y cuantas más veces aparece la animación, más corta debe ser. La curva más usada empieza rápida y frena al final, llamada ease-out, porque el ojo puede prever dónde se va a detener el elemento.

Arrastrar y soltar usa la misma idea, con una animación corta que muestra dónde va a caer el elemento, como cuento en el texto sobre arrastrar y soltar.

Quién pide menos movimiento

Para algunas personas, el movimiento en pantalla no es cuestión de gusto. Quien tiene un trastorno vestibular, ligado al equilibrio y al oído interno, puede sentir mareo, náuseas y migraña. A veces necesita incluso guardar reposo en cama para recuperarse (W3C, Understanding 2.3.3 (en inglés)). Los efectos de paralaje, en los que el fondo se mueve a otra velocidad que el primer plano, están entre los detonantes citados.

Los sistemas operativos tienen una opción para esto, que en iPhone, Android, Windows y macOS está en los ajustes de accesibilidad. El navegador le pasa esa elección al sitio con la consulta de medios prefers-reduced-motion, que funciona en todos los navegadores principales desde enero de 2020 (MDN, prefers-reduced-motion (en inglés)).

El valor reduce indica que la persona quiere menos movimiento, de preferencia sin ninguno que no sea necesario (web.dev, prefers-reduced-motion). La guía señala dos cuidados que suelen pasar desapercibidos:

La animación hecha con JavaScript tiene que escuchar el cambio. El CSS reacciona solo cuando la persona cambia la opción, pero el script tiene que volver a comprobarla o escuchar el evento de cambio.
La imagen animada también cuenta. Con <picture> y el atributo media, el navegador muestra la versión fija a quien pidió menos movimiento.

Las pautas de accesibilidad del W3C tratan el tema en el criterio 2.3.3, de nivel AAA, el más exigente. La animación de movimiento activada por una interacción tiene que poder desactivarse, salvo que sea esencial (W3C, WCAG 2.2 (en inglés)). El movimiento que empieza solo y dura más de cinco segundos cae en otro criterio, el 2.2.2 (en inglés), que expliqué en el texto sobre carruseles en el comercio electrónico.

Lo que el navegador anima sin esfuerzo

No todas las propiedades cuestan lo mismo al animarse. La guía de web.dev pide que la animación se quede, siempre que se pueda, en transform y opacity (web.dev, animaciones CSS de alto rendimiento). Mover con top y left, o cambiar ancho y alto, obliga al navegador a recalcular el diseño y volver a pintar la página en cada fotograma.

La misma guía trata will-change como último recurso. Esta propiedad pasa el elemento a una capa propia, lo que puede crear otros problemas, así que solo entra cuando aparece un problema real de fluidez.

Cómo lo resolví en kahue.net

En las páginas del sitio, los bloques que están por debajo de la primera pantalla entran con un deslizamiento de 14 píxeles y un fundido, en 420 ms. La curva es de las que frenan al final, y solo cambian transform y opacity. La parte de arriba de la página queda quieta a propósito. Es lo primero que aparece, y animar lo que ya estaba en pantalla solo retrasaría la lectura.

Cuando varios elementos entran juntos, cada uno empieza 70 ms después del anterior, pero el retraso se detiene en el tercero. De ahí en adelante, esperar no aporta nada a quien ya decidió leer.

La animación es una capa encima, no una condición. Sin JavaScript no se aplica ninguna regla de movimiento, y el contenido aparece completo y en su lugar. Quien salta bloques con un enlace de ancla o con la tecla Fin tampoco encuentra un hueco vacío, porque todo bloque que quedó atrás se revela.

El pedido de menos movimiento se resuelve en el CSS, no en el script, para que funcione aunque el script falle. Con la opción activada, los bloques ya aparecen en su lugar, el desplazamiento suave pasa a ser directo y no se ejecuta ninguna transición. En la galería de pantallas de los casos, el cambio de imagen se desliza en 180 ms, y el código revisa la preferencia en cada cambio. Si la persona activa la opción con la galería abierta, la siguiente imagen ya aparece sin deslizamiento.

Dónde las fuentes no coinciden

El primer punto es la duración del movimiento que la persona no activó. El texto de NN/g de 2020 considera 400 ms muy lento (NN/g (en inglés)). El de 2014 acepta transiciones más lentas, con poco desplazamiento, cuando la animación viene del desplazamiento de la página o de la carga (NN/g (en inglés)). Los 420 ms de kahue.net superan el tope de 2020 y encajan en la regla de 2014.

El segundo es qué hacer con el pedido de menos movimiento. El artículo de NN/g de 2020 habla de quitar las animaciones (NN/g (en inglés)). La definición del W3C, en cambio, no cuenta los cambios de color ni de opacidad como animación de movimiento (W3C, definición de animación de movimiento (en inglés)). MDN habla de quitar, reducir o reemplazar el movimiento (MDN (en inglés)). Con el criterio del W3C, un fundido sin deslizamiento seguiría permitido.

kahue.net eligió el lado más estricto. La regla general apaga todas las transiciones, incluidas las de color, lo que va más allá de lo que pide el criterio.

El error común: esconder el contenido hasta que corra la animación

Muchos sitios empiezan con los bloques invisibles en el CSS y confían en que un script los mostrará en el momento justo. Si el script se retrasa, falla o queda bloqueado, el texto nunca aparece. La animación, que debería ser un adorno, termina decidiendo si la persona lee o no.

La salida es invertir el orden. La página nace completa, y el estado escondido solo entra después de que el script confirma que está funcionando. Quien pidió menos movimiento, quien navega sin scripts y el rastreador del buscador reciben el mismo contenido.