GUÍA / MOTION
Animaciones web con identidad sin sacrificar rendimiento
Una guía para usar movimiento con propósito, accesibilidad y un presupuesto técnico claro, sin retrasar contenido ni sacrificar el rendimiento en móvil.
Por DevForge · Actualizada: 31 de agosto de 2026
RESPUESTA CORTA
El motion profesional explica cambios, crea jerarquía y conserva contexto. Debe priorizar transform y opacity, respetar prefers-reduced-motion y evitar que las imágenes o scripts retrasen el contenido principal.
Primero se define la función
Una animación puede presentar el protagonista, revelar una secuencia, confirmar una selección o conectar dos estados. Si no cumple ninguna de esas funciones, probablemente es ruido.
- Entrada: indica qué mirar primero.
- Transición: explica qué cambió.
- Respuesta: confirma una acción.
- Ritmo: separa momentos sin llenar la pantalla de efectos.
Un presupuesto de movimiento
Transformaciones y opacidad suelen ser más predecibles que animar dimensiones o posiciones que fuerzan el layout. Las animaciones de scroll necesitan límites, y los recursos pesados deben cargarse según su importancia real.
Accesibilidad y verificación
prefers-reduced-motion no significa quitar contenido: significa ofrecer el mismo recorrido sin desplazamientos o parallax innecesarios. La comprobación final debe incluir teclado, móvil real, Core Web Vitals y estados con JavaScript lento.
FUENTES PRIMARIAS