# Principios del motion design para quienes no animan

[Canonical HTML page](https://gradiently.design/es/guide/motion-design-principles)

No hace falta ser animador para crear un movimiento que se sienta bien. Hacen falta unos pocos principios, un puñado de duraciones y la disciplina de usar menos.

## The short version

- El buen motion design se apoya en cinco principios: dar propósito a cada movimiento, medir bien su tiempo, suavizarlo, ordenarlo por importancia y usar el mínimo posible.
- Los movimientos pequeños de una interfaz suelen sentirse bien entre unos 150 y 300 milisegundos, mientras que los movimientos grandes y las entradas necesitan más tiempo.
- Lo que entra debe desacelerar, lo que sale debe acelerar y los bucles continuos deben moverse a un ritmo constante.
- Cuando se mueven varios elementos, el más importante debe moverse primero, y solo una cosa debe liderar cada vez.
- Un pequeño sistema de movimiento con tres duraciones y dos o tres curvas de suavizado mantiene coherente el movimiento de una marca en cada pieza.

Los **principios del motion design** son las reglas prácticas que hacen que el movimiento se sienta natural y no aleatorio. La animación clásica de personajes tiene sus famosos doce, expuestos por los animadores de Disney Frank Thomas y Ollie Johnston en *The Illusion of Life*. Para el trabajo de diseño, como publicaciones, webs, logos y presentaciones, cinco hacen casi todo el trabajo: **propósito, tiempo, suavizado, jerarquía y contención**. Puedes usarlos sin abrir nunca una aplicación de animación.

## Propósito: cada movimiento debe cumplir una función

El movimiento es ruidoso. Todo lo que se mueve atrae la mirada, así que mover algo equivale a afirmar que importa ahora mismo. Antes de animar, nombra la función. Si no puedes, déjalo quieto.

### Movimiento con función

- Atrae la mirada hacia lo único que hay que leer primero
- Muestra de dónde viene o adónde va algo
- Confirma una acción: enviado, guardado, añadido
- Crea un ambiente con un fondo lento

### Movimiento porque sí

- Cada elemento entrando con rebote al llegar
- Texto que sigue moviéndose mientras lo lees
- Logos que giran y botones que palpitan
- Transiciones que te hacen esperar

## Tiempo: cuánto debe durar el movimiento

La duración es el principio que más gente hace mal, normalmente yendo demasiado lento en lo pequeño y demasiado rápido en lo grande. Ayudan dos reglas. Los movimientos pequeños y frecuentes deben ser rápidos, porque la gente los ve todo el tiempo. Los movimientos que recorren más distancia o cambian más deben durar más, porque el ojo necesita tiempo para seguirlos.

| Tipo de movimiento | Duración habitual | Por qué |
| --- | --- | --- |
| Respuesta de botones e interruptores | Unos 100 a 200 ms | Se siente instantáneo, pero sigue siendo visible |
| Cambios pequeños de interfaz, menús | Unos 200 a 300 ms | Lo bastante rápido para no retrasar a nadie |
| Paneles grandes, cambios de página | Unos 300 a 500 ms | Más distancia necesita más tiempo |
| Texto que entra en una publicación o vídeo | Unos 0,4 a 1 s | Lo bastante largo para notarse como una entrada |
| Deriva del fondo en un bucle | Muchos segundos por ciclo | Es ambiente, no información: apenas debe notarse |

Rangos de partida habituales en trabajo de interfaz y movimiento. Prueba en el dispositivo real y ajusta.

Una prueba útil: si la gente nota la animación en sí y no lo que muestra, es demasiado lenta o demasiado grande. Si no percibe el cambio, es demasiado rápida.

## Suavizado: por qué nada debe moverse a velocidad constante

Los objetos reales aceleran y frenan. El movimiento a una velocidad constante, llamado lineal, se ve mecánico porque nada en el mundo se mueve así. Las curvas de suavizado añaden aceleración y desaceleración, y elegir la adecuada es sencillo cuando conoces tres casos.

- **Entrar: ease out.** Llega rápido y se asienta con suavidad, como un coche que se detiene. La mayoría de las entradas usan esto.
- **Salir: ease in.** Empieza con suavidad y se aleja acelerando. Las salidas también pueden ser más cortas que las entradas.
- **Moverse dentro del encuadre: ease in out.** Empieza y termina con suavidad.
- **Bucles y rotaciones: lineal.** El movimiento continuo debe mantener un ritmo constante, o parecerá dudar en la unión.

```css
.panel-enter {
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);  /* ease out */
}
.panel-leave {
  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);  /* ease in, and shorter */
}
.background-drift {
  animation: drift 20s linear infinite;                    /* steady loop */
}
```

Los tres casos en CSS. El [suavizado explicado](https://gradiently.design/es/guide/easing) profundiza en las curvas.

## Jerarquía: mueve primero lo importante

El movimiento crea un orden de lectura, igual que el tamaño y el peso en un diseño fijo. Lo que se mueve primero se lee primero. Cuando se animan varios elementos, escalónalos por orden de importancia, con un breve intervalo de unos 50 a 150 milisegundos entre cada uno, y deja que solo un elemento lidere cada vez. La [jerarquía visual](https://gradiently.design/es/guide/visual-hierarchy) trata la versión fija de la misma idea.

Una historia vertical que anuncia la colección de primavera, con una pequeña etiqueta arriba y una línea de detalles abajo

En una versión animada de esta historia, el titular llega primero, luego la fecha y después los detalles. El fondo mantiene su propio ritmo lento por debajo.

1. **El fondo se asienta** El campo ya se mueve despacio cuando aparece la publicación. Crea el ambiente sin pedir que se lea.
2. **Entra el titular** Una entrada clara, con ease out, en menos de un segundo.
3. **Siguen las líneas de apoyo** La etiqueta y los detalles llegan justo después, en orden de lectura, con un movimiento menor.
4. **Todo se detiene** Las palabras se paran y permanecen quietas el tiempo suficiente para leerse. Solo el fondo sigue moviéndose.

## Contención: usa menos movimiento del que crees

La quietud es lo que da sentido al movimiento. Si todo se mueve, nada destaca y el diseño resulta ansioso. Elige un movimiento principal por pieza, mantén cortas las distancias y deja que las palabras se queden quietas una vez han llegado. La contención también es cuestión de personas: a algunos espectadores el movimiento les resulta incómodo o incluso les provoca malestar, así que toda pieza debe funcionar con el movimiento desactivado. El [movimiento reducido](https://gradiently.design/es/guide/reduced-motion) explica cómo planificarlo.

> **La prueba del fotograma fijo** Pausa tu animación en cualquier fotograma. Si ese fotograma no parece un diseño terminado, el movimiento está tapando una composición débil.

## Coherencia: un pequeño sistema de movimiento

Las marcas mantienen coherentes los colores y las fuentes; el movimiento merece el mismo cuidado. Escribe un sistema diminuto y reutilízalo: tres duraciones, dos o tres curvas de suavizado y un movimiento propio para los fondos. Evita que cada pieza nueva invente su propia velocidad y hace reconocible tu movimiento, tal como describe [movimiento para marcas estáticas](https://gradiently.design/es/guide/motion-for-still-brands).

```css
:root {
  --motion-quick: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-quick: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
  }
}
```

Un sistema de movimiento como design tokens. Todo usa estos nombres, y el movimiento reducido los acorta todos en un solo lugar.

Aplica los mismos principios al animar un logo, una publicación o la cabecera de una web. Los [logos animados](https://gradiently.design/es/guide/animated-logo) y las [publicaciones animadas](https://gradiently.design/es/guide/animated-social-posts) los muestran en acción.

## FAQ

### ¿Cuáles son los principios básicos del motion design?

Para el trabajo de diseño, cinco cubren casi todo: dar un propósito a cada movimiento, elegir una duración razonable, usar suavizado, ordenar el movimiento por importancia y usar el mínimo movimiento posible.

### ¿Cuánto debe durar una animación?

La respuesta de una interfaz suele funcionar en unos 100 a 300 milisegundos, los movimientos más grandes en unos 300 a 500 milisegundos y las entradas de texto en publicaciones o vídeo en torno a medio segundo o un segundo.

### ¿Qué suavizado debo usar?

Ease out para lo que entra, ease in para lo que sale, ease in out para lo que se mueve dentro del encuadre y lineal para los bucles continuos.

### ¿Cuáles son los 12 principios de la animación?

Son principios de la animación de personajes descritos por los animadores de Disney Frank Thomas y Ollie Johnston en The Illusion of Life. El tiempo y el suavizado, que ellos llaman slow in y slow out, son los que más directamente se trasladan al movimiento de diseño.