Las micro-animaciones son pequeños movimientos visuales interactivos que ocurren cuando un usuario interactúa con la web: un botón que cambia de estado al pasar el ratón, un acordeón que se despliega con suavidad o un tick verde que confirma el envío de un formulario.
Bien utilizadas, convierten una web estática en un producto digital vivo y agradable. Mal utilizadas, ralentizan la navegación y marean al visitante.
1. Las micro-animaciones que SÍ aportan valor
Interacciones que mejoran la usabilidad
- Feedback táctil inmediato: Cambios sutiles de color o escala (hover/active) en botones para confirmar que el clic se ha registrado.
- Apertura progresiva de acordeones (FAQ): Transiciones de altura suaves que guían la atención hacia la respuesta.
- Transiciones de página y skeleton loaders: Mostrar la estructura del contenido antes de que termine de cargar para reducir el tiempo percibido de espera.
Micro-interacciones — Animaciones de 150ms aceleradas por GPU para una respuesta táctil instantánea.
2. Las animaciones que debes evitar a toda costa
- Efectos que bloquean la lectura: Textos que tardan 3 segundos en aparecer haciendo scroll.
- Animaciones pesadas en JavaScript: Librerías masivas que consumen batería del móvil y bajan los FPS.
- Efectos sin opción de reducción de movimiento: Respeta siempre la preferencia del sistema `prefers-reduced-motion`.