# Easing explicado: por qué el buen movimiento se siente natural

[Canonical HTML page](https://gradiently.design/es/guide/easing)

El mismo movimiento puede sentirse torpe o fluido según un solo ajuste. Ese ajuste es el easing, y unas pocas reglas sencillas cubren casi todos los casos.

## The short version

- El easing describe cómo cambia la velocidad de un movimiento a lo largo de su duración, en lugar de mantenerse constante de principio a fin.
- Ease-out empieza rápido y frena, lo que conviene a lo que entra; ease-in empieza despacio y acelera, lo que conviene a lo que sale.
- El movimiento lineal, a velocidad constante, resulta mecánico en movimientos sueltos pero es lo correcto para bucles continuos y giros.
- Una curva cubic-bezier define cualquier easing con dos puntos de control, y los valores fuera de 0 a 1 crean un rebasamiento.
- Los muelles describen el movimiento con ajustes físicos como la rigidez y el amortiguamiento, y CSS puede aproximarlos con la función linear().

El **easing** es cómo cambia la velocidad de un movimiento mientras se reproduce. Sin easing, un objeto se mueve a una velocidad constante y se detiene en seco, lo que resulta mecánico. Con easing, acelera y frena como lo hacen las cosas reales: un cajón sale rápido y se asienta, una pelota gana velocidad al caer. Elegir el easing adecuado es la forma más rápida de que cualquier animación se sienta natural.

## Cómo se ve el easing

Los animadores dibujan el easing como una carta de espaciado: dónde está un objeto en pasos iguales de tiempo. Cuando las marcas están a igual distancia, la velocidad es constante. Cuando se apiñan, el objeto se mueve despacio; cuando se separan, se mueve rápido. Aquí están los cuatro easings básicos, cada uno con once momentos iguales del mismo movimiento de izquierda a derecha.

- Lineal: espaciado uniforme: `linear-gradient(90deg, #f9a8d4 0% 1.2%, #1e1b4b 1.2% 9.4%, #f9a8d4 9.4% 10.6%, #1e1b4b 10.6% 19.4%, #f9a8d4 19.4% 20.6%, #1e1b4b 20.6% 29.4%, #f9a8d4 29.4% 30.6%, #1e1b4b 30.6% 39.4%, #f9a8d4 39.4% 40.6%, #1e1b4b 40.6% 49.4%, #f9a8d4 49.4% 50.6%, #1e1b4b 50.6% 59.4%, #f9a8d4 59.4% 60.6%, #1e1b4b 60.6% 69.4%, #f9a8d4 69.4% 70.6%, #1e1b4b 70.6% 79.4%, #f9a8d4 79.4% 80.6%, #1e1b4b 80.6% 89.4%, #f9a8d4 89.4% 90.6%, #1e1b4b 90.6% 98.8%, #f9a8d4 98.8% 100%)`
- Ease-in: inicio lento, final rápido: `linear-gradient(90deg, #f9a8d4 0% 2.3%, #1e1b4b 2.3% 5.6%, #f9a8d4 5.6% 6.8%, #1e1b4b 6.8% 12.4%, #f9a8d4 12.4% 13.6%, #1e1b4b 13.6% 20.9%, #f9a8d4 20.9% 22.1%, #1e1b4b 22.1% 30.9%, #f9a8d4 30.9% 32.1%, #1e1b4b 32.1% 42.3%, #f9a8d4 42.3% 43.5%, #1e1b4b 43.5% 54.9%, #f9a8d4 54.9% 56.1%, #1e1b4b 56.1% 68.6%, #f9a8d4 68.6% 69.8%, #1e1b4b 69.8% 83.3%, #f9a8d4 83.3% 84.5%, #1e1b4b 84.5% 98.8%, #f9a8d4 98.8% 100%)`
- Ease-out: inicio rápido, parada suave: `linear-gradient(90deg, #f9a8d4 0% 1.2%, #1e1b4b 1.2% 15.5%, #f9a8d4 15.5% 16.7%, #1e1b4b 16.7% 30.2%, #f9a8d4 30.2% 31.4%, #1e1b4b 31.4% 43.9%, #f9a8d4 43.9% 45.1%, #1e1b4b 45.1% 56.5%, #f9a8d4 56.5% 57.7%, #1e1b4b 57.7% 67.9%, #f9a8d4 67.9% 69.1%, #1e1b4b 69.1% 77.9%, #f9a8d4 77.9% 79.1%, #1e1b4b 79.1% 86.4%, #f9a8d4 86.4% 87.6%, #1e1b4b 87.6% 93.2%, #f9a8d4 93.2% 94.4%, #1e1b4b 94.4% 97.7%, #f9a8d4 97.7% 100%)`
- Ease-in-out: suave en ambos extremos: `linear-gradient(90deg, #f9a8d4 0% 2.6%, #1e1b4b 2.6% 7.6%, #f9a8d4 7.6% 8.8%, #1e1b4b 8.8% 18.1%, #f9a8d4 18.1% 19.3%, #1e1b4b 19.3% 32.6%, #f9a8d4 32.6% 33.8%, #1e1b4b 33.8% 49.4%, #f9a8d4 49.4% 50.6%, #1e1b4b 50.6% 66.2%, #f9a8d4 66.2% 67.4%, #1e1b4b 67.4% 80.7%, #f9a8d4 80.7% 81.9%, #1e1b4b 81.9% 91.2%, #f9a8d4 91.2% 92.4%, #1e1b4b 92.4% 97.4%, #f9a8d4 97.4% 100%)`

Cartas de espaciado calculadas a partir de las curvas CSS. Cada línea rosa es la posición del objeto en uno de once momentos iguales. Las líneas apiñadas significan lento; las separadas, rápido.

## Los cuatro easings que de verdad necesitas

CSS nombra cinco curvas básicas, y las herramientas de diseño usan las mismas ideas con nombres parecidos. Cuatro de ellas cubren casi todos los trabajos. La quinta, `ease`, es el valor por defecto del navegador: una curva que empieza bastante rápido y se asienta con suavidad, muy parecida a un ease-out más blando.

| Easing | Curva CSS | Úsalo para |
| --- | --- | --- |
| Ease-out | `cubic-bezier(0, 0, 0.58, 1)` | Lo que entra o aparece: menús, tarjetas, titulares |
| Ease-in | `cubic-bezier(0.42, 0, 1, 1)` | Lo que sale o desaparece |
| Ease-in-out | `cubic-bezier(0.42, 0, 0.58, 1)` | Lo que se mueve de un lugar a otro de la pantalla |
| Lineal | `cubic-bezier(0, 0, 1, 1)` | Bucles continuos, giros, barras de progreso, deriva del fondo |

Los valores de palabra clave de CSS. Muchos equipos usan curvas propias algo más marcadas, pero los papeles siguen siendo los mismos.

La lógica es física. Algo que llega ya debe estar en movimiento cuando aparece y luego asentarse, así que hace ease-out. Algo que se va debe ganar velocidad mientras se marcha, así que hace ease-in. Lo lineal está mal para un movimiento suelto, pero es lo correcto para todo lo continuo: un bucle con easing en sus extremos parece vacilar cada vez que se repite, como explican los [bucles de vídeo sin costuras](https://gradiently.design/es/guide/seamless-loop-video).

## Cómo funcionan las curvas cubic-bezier

Toda curva de easing de CSS se dibuja entre dos puntos fijos, el inicio (0, 0) y el final (1, 1). Un `cubic-bezier()` añade dos puntos de control que doblan la curva. El eje horizontal es el tiempo y el vertical es el progreso. Los valores de tiempo deben quedarse entre 0 y 1, pero los de progreso pueden pasarse, lo que hace que un movimiento rebase su destino y vuelva.

```css
/* A stronger ease-out than the keyword: quick start, long gentle settle */
.card-enter {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Overshoot: the second y value above 1 carries it past, then back */
.badge-pop {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Exits: shorter and easing in */
.card-leave {
  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);
}
```

Curvas propias en CSS. Reserva el rebasamiento para momentos pequeños y juguetones; en paneles grandes se siente tembloroso.

La referencia de MDN sobre [funciones de easing](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) enumera todas las formas que acepta CSS, incluida `steps()` para el movimiento fotograma a fotograma.

## Muelles: easing a partir de la física

Un muelle no usa una curva y una duración fijas. En su lugar describes la física, normalmente la rigidez (con qué fuerza tira hacia el destino), el amortiguamiento (con qué rapidez se calma) y la masa, y el movimiento sigue. Los muelles rígidos y bien amortiguados se sienten ágiles y precisos; los sueltos y poco amortiguados rebotan. Los muelles son populares en las interfaces de apps porque responden con naturalidad cuando un movimiento se interrumpe a medias.

Muchas librerías de animación ofrecen muelles directamente. En CSS puro, la función `linear()` puede aproximar uno enumerando puntos a lo largo de su trayectoria, algo que admiten los navegadores modernos.

```css
/* A simple spring-like settle: past the target, back, then rest */
.sheet-open {
  transition: transform 500ms
    linear(0, 0.6 20%, 1.08 45%, 0.98 70%, 1);
}
```

`linear()` une los puntos con segmentos rectos. Más puntos dan una curva más suave; hay generadores que pueden calcularlos a partir de los ajustes de un muelle.

## El easing y la duración trabajan juntos

La misma curva se siente distinta con distintas duraciones. Un ease-out de 150 milisegundos se lee como un chasquido nítido; de 800, como un deslizamiento lento. Ajusta ambos a la distancia y al trabajo. [Principios del diseño de movimiento](https://gradiently.design/es/guide/motion-design-principles) recoge duraciones habituales.

### Errores comunes

- Movimiento lineal para un menú o una tarjeta que entra
- Ease-in en lo que aparece, de modo que arranca con pereza
- La misma duración larga para movimientos pequeños y grandes
- Rebasamiento con rebote en todo
- Easing en los extremos de un bucle continuo

### Mejor

- Ease-out para todo lo que llega
- Ease-in, algo más corto, para todo lo que se va
- Corto para movimientos pequeños, más largo para los grandes
- El rebasamiento reservado para momentos pequeños y juguetones
- Lineal para los bucles, para que nunca vacilen

## Easing en JavaScript, herramientas de diseño y vídeo

Las mismas curvas funcionan fuera de CSS. En JavaScript, la Web Animations API acepta una cadena de easing de CSS. Las herramientas de diseño y de vídeo usan las mismas ideas con nombres como ease in, ease out y ease in and out, normalmente con un editor de gráficas para curvas propias y, en muchas herramientas de prototipado, ajustes preestablecidos de muelle.

```js
const card = document.querySelector('.card')

card.animate(
  [
    { transform: 'translateY(24px)', opacity: 0 },
    { transform: 'translateY(0)', opacity: 1 },
  ],
  { duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'both' },
)
```

Una entrada con easing usando la Web Animations API, con la misma curva que el CSS de arriba.

Sea cual sea la curva, hay personas que prefieren menos movimiento. Respeta su ajuste acortando o quitando el movimiento; [movimiento reducido](https://gradiently.design/es/guide/reduced-motion) muestra cómo. Y para los fondos en bucle, donde lo lineal suele ser lo correcto, mira [fondos de degradado animado](https://gradiently.design/es/guide/animated-gradient-background).

## FAQ

### ¿Qué es el easing en animación?

El easing es la forma en que cambia la velocidad de un movimiento a lo largo de su duración. En lugar de moverse a velocidad constante, un movimiento con easing acelera, frena o ambas cosas, lo que se ve más natural.

### ¿Cuál es la diferencia entre ease-in y ease-out?

Ease-in empieza despacio y acelera, lo que conviene a lo que sale. Ease-out empieza rápido y frena, lo que conviene a lo que entra.

### ¿Cuándo debo usar easing lineal?

Para el movimiento continuo, como bucles, giros, barras de progreso y la deriva lenta de un fondo. En los movimientos sueltos resulta mecánico.

### ¿Qué significa cubic-bezier en CSS?

Define una curva de easing con dos puntos de control entre el inicio y el final fijos. Los valores de tiempo se quedan entre 0 y 1, mientras que los de progreso fuera de ese rango crean rebasamiento.

### ¿Qué es la animación de muelle?

Un movimiento descrito con ajustes físicos como la rigidez, el amortiguamiento y la masa en lugar de una curva fija. CSS puede aproximar los muelles con la función de easing linear().