La versión corta
- 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().
En esta página
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.
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 |
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.
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.
/* 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);
}La referencia de MDN sobre funciones de easing 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.
/* 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 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.
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' },
)Sea cual sea la curva, hay personas que prefieren menos movimiento. Respeta su ajuste acortando o quitando el movimiento; movimiento reducido muestra cómo. Y para los fondos en bucle, donde lo lineal suele ser lo correcto, mira fondos de degradado animado.
Preguntas frecuentes
¿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().
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
