Animaciones web que no estorban

Introducción

El movimiento bien usado explica una transición. Mal usado, retrasa la lectura y marea a quien es sensible al movimiento.

Animar propiedades baratas

Conviene animar solo transformaciones y opacidad. Cambiar geometría en cada fotograma obliga al navegador a recalcular el diseño de la página.

Respetar la preferencia del sistema

Quien activa la reducción de movimiento en su sistema operativo pide menos animación de forma explícita. Esa preferencia se puede leer desde CSS y desde JavaScript, y hay que respetarla siempre.

No esconder contenido detrás del movimiento

Si una animación falla o el JavaScript no carga, el texto debe seguir visible. El estado oculto inicial nunca debe venir en el HTML servido.

Conclusión

El movimiento es un acento, no la estructura. La página tiene que funcionar entera sin él.