Una animación web representa un cambio a lo largo del tiempo. Puede explicar que un panel se ha abierto, confirmar una acción o mostrar la relación entre dos estados. Su utilidad depende de la información que aporta al usuario, no de la cantidad de movimiento de la página.
Motion UI es el uso del movimiento dentro de una interfaz. Una microinteracción es una respuesta acotada a una acción: seleccionar, guardar, desplegar o corregir un dato. Puede incorporar animación, pero también texto, color o un cambio de estado inmediato.
Qué problema puede resolver el movimiento
Al abrir un menú, la transición puede ayudar a entender de dónde aparece. Al reordenar una lista, puede mostrar dónde termina el elemento seleccionado. Al enviar un formulario, la interfaz debe distinguir entre una operación en curso, un resultado confirmado y un error.
En cada caso hay una pregunta concreta: «¿ha respondido?», «¿dónde está ahora?» o «¿qué puedo hacer después?». Si el efecto no responde a ninguna, merece la pena probar la pantalla sin él.
| Necesidad | Recurso posible | Qué evitar |
|---|---|---|
| Entender un cambio de estado | Una transición breve al expandir o seleccionar. | Que solo el movimiento comunique el resultado. |
| Seguir la posición de un elemento | Un desplazamiento entre origen y destino. | Recorridos largos que retrasan el trabajo. |
| Saber que una operación continúa | Un indicador acompañado de texto de estado. | Inventar un porcentaje si no hay progreso medible. |
| Comprender una explicación | Una secuencia con controles de reproducción. | Información que desaparece antes de poder leerla. |
Tipos de animaciones web y cómo elegir la técnica
Transiciones y animaciones CSS
Una transición describe el paso entre estados, por ejemplo al cambiar una clase o desplegar información. Una animación por fotogramas clave permite definir una secuencia. Son opciones útiles cuando el comportamiento es sencillo y está ligado a elementos de la página.
JavaScript y Web Animations API
Cuando el movimiento depende de datos, necesita coordinación o debe poder pausarse y reanudarse de forma programática, puede requerir JavaScript. La elección no exige añadir una biblioteca para cualquier efecto. Primero define el control que necesitas y comprueba si las herramientas del navegador lo cubren.
SVG, vídeo y recursos preparados
SVG resulta útil para formas, iconos y diagramas. El vídeo puede encajar en una explicación audiovisual, pero necesita controles y una alternativa cuando contiene información importante. Los recursos exportados desde herramientas de animación también deben revisarse por peso, compatibilidad y comportamiento en móvil.
La técnica no decide por sí sola si el resultado es accesible o rápido. Un efecto CSS puede distraer y una secuencia compleja puede estar bien controlada. Importan la implementación y las condiciones de uso.
Ejemplo: desplegar información sin perder el control
El siguiente bloque utiliza un control nativo. Puedes abrirlo con ratón, con el dedo o mediante teclado. El contenido permanece disponible mientras esté abierto y no hay una reproducción continua.
Ver qué cambia al desplegar este bloque
El estado cambia de cerrado a abierto. Una entrada breve acompaña la aparición del contenido. Si tu dispositivo solicita movimiento reducido, el texto aparece sin esa animación.
La información también se entiende sin movimiento: el control y el contenido no dependen de un efecto para funcionar.
Este ejemplo ayuda a separar función y presentación. La función es mostrar u ocultar información. La animación acompaña esa función y puede retirarse sin perderla. En un formulario, en cambio, un efecto visual nunca debería sustituir el mensaje que explica un error.
Respetar a quien necesita menos movimiento
Algunas personas necesitan reducir los desplazamientos y efectos de la interfaz. El criterio Animation from Interactions de WCAG, nivel AAA contempla poder desactivar las animaciones de movimiento provocadas por interacción cuando no son esenciales.
La consulta CSS prefers-reduced-motion permite adaptar la presentación a la preferencia comunicada por el dispositivo. Una alternativa puede ser eliminar el desplazamiento y mostrar directamente el estado final. Mantén los mensajes, los controles y la información necesarios.
Para contenido que comienza a moverse automáticamente, también hay que revisar cómo se pausa o detiene. La guía de W3C sobre pausar, detener y ocultar trata esta situación de forma específica. Evita que leer dependa de perseguir un texto que se desplaza.
Teclado, foco y significado
Comprueba el recorrido completo con teclado. Un panel animado debe poder abrirse y cerrarse sin un gesto exclusivo del ratón. El foco tiene que ser visible y quedar en un lugar comprensible. Si se elimina una animación, la tarea debe seguir siendo posible.
El color, el movimiento y los iconos pueden reforzar un estado, pero conviene acompañarlos de una indicación que se entienda por sí misma. «Guardado» informa mejor que una vibración fugaz de un botón cuyo significado no se explica.
Cómo evitar que el efecto ralentice la tarea
Revisa el coste en dispositivos y pantallas representativos. La guía de rendimiento de web.dev explica por qué suele ser preferible animar transform y opacity antes que propiedades que obligan a recalcular la disposición de la página. No es una garantía: hay que medir el resultado.
Un recurso pesado, demasiados elementos animados o trabajo de JavaScript durante el desplazamiento pueden producir saltos. También conviene comprobar si el contenido se puede leer antes de que termine una secuencia de entrada. La persona no debería esperar una presentación para utilizar un enlace.
Lista de comprobación antes de publicar
- Describe la información que aporta cada efecto.
- Prueba la misma tarea con movimiento reducido.
- Recorre los controles con teclado y revisa el foco.
- Comprueba que los estados de error y confirmación tienen texto claro.
- Revisa el comportamiento en móvil y con recursos limitados.
- Verifica que el contenido esencial sigue disponible si falla el código del efecto.
- Elimina secuencias repetitivas que no ayuden a orientarse ni a completar la tarea.
El resultado se valora por cómo se usa la interfaz: si el cambio se entiende, si el control responde y si la tarea se puede completar sin distracciones. Una captura atractiva no permite comprobar todo eso.
