Diseño
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.
