Animación

El movimiento en las interfaces no es decoración. Es comunicación. Bien realizada, la animación responde preguntas que el usuario estaba a punto de hacer: ¿de dónde vino ese elemento, adónde va y qué acaba de pasar?

El Propósito del Movimiento

Cada animación en una interfaz debe cumplir una de estas funciones: orientar (explicar las relaciones espaciales), informar (comunicar el resultado de una acción), guiar (dirigir la atención a lo que importa) o deleitar (recompensar la interacción de forma natural). El movimiento sin propósito añade ruido, no claridad.

Principios que Funcionan

Una buena animación de interfaz comparte algunas propiedades. Es rápida — típicamente 200–400ms para transiciones, más corta para el feedback. Sigue la física natural — acelerando y desacelerando en lugar de moverse a velocidad constante. Y respeta las preferencias del usuario — la media query prefers-reduced-motion existe para usuarios con trastornos vestibulares y siempre debe respetarse.

"La animación debe sentirse como física, no como actuación. El mejor movimiento pasa desapercibido."

Las Animaciones de Salida Importan

Las entradas son obvias. Las salidas son donde la mayoría de las animaciones fallan. Un elemento que desaparece sin animarse parece un error. Un elemento que sale animándose suavemente completa el bucle de interacción y deja al usuario con un modelo mental claro de lo que acaba de cambiar.

Consideraciones de Rendimiento

Las animaciones deben ejecutarse en la GPU, no en la CPU. Esto significa limitarse a transform y opacity — propiedades que pueden componerse sin activar el recálculo del layout. Animar width, height o top/left causa repintados en cada fotograma y debe evitarse.

Conclusión

El diseño de motion para la web es un oficio. El objetivo no es hacer que las cosas se muevan — es hacer que las interacciones se sientan coherentes, intuitivas y vivas.