El catálogo de curvas: cuatro roles, no veinte formas

El editor de curvas de las DevTools tiene infinitas posibilidades y eso es justo el problema: un sistema de movimiento con quince curvas no tiene sistema. Un producto entero se cubre con cuatro, y cada una de las cuatro corresponde a un rol —lo que el elemento está haciendo— y no a una forma. Esa distinción entre rol y forma es lo que hace que un equipo elija bien sin tener que entender de Bézier.

La asimetría y de dónde sale

La regla más importante de todo el catálogo: lo que entra desacelera, lo que sale acelera. Y la razón no es que quede bonito.

Un elemento que entra en pantalla viene de fuera. En el mundo físico, algo que llega ya traía velocidad y se detiene al llegar: su perfil de movimiento es rápido al principio y lento al final. Reproducir ese perfil hace que la llegada se lea como una llegada. La curva correcta es una que arranca a máxima velocidad y frena: cubic-bezier(0, 0, 0.2, 1).

Un elemento que sale se va. No hace falta ver dónde acaba, ni siquiera hace falta verlo todo el trayecto: en cuanto se entiende que se va, el resto del movimiento es tiempo perdido. Un perfil que arranca despacio y acelera consigue exactamente eso: los primeros milisegundos comunican la intención y el resto ocurre demasiado rápido para reclamar atención. La curva es cubic-bezier(0.4, 0, 1, 1).

Poner la asimetría al revés —entrada que acelera, salida que frena— produce un efecto muy reconocible una vez que sabes buscarlo: la entrada se percibe como lenta porque sus primeros milisegundos son casi inmóviles, y la salida se percibe como que el elemento “se resiste a irse” y se queda ahí colgado al final. Es el defecto de movimiento más común en interfaces hechas sin sistema, y la causa casi siempre es la misma: se usó ease-in-out para todo.

Y el caso intermedio: un elemento que ya está en pantalla y se mueve a otro sitio. Ni llega ni se va, así que necesita aceleración y frenado en los dos extremos. Ahí sí una curva simétrica, pero con más carácter que la ease-in-out por defecto: cubic-bezier(0.4, 0, 0.2, 1).

Los cuatro tokens

:root {
  /* Entra en pantalla: arranca rapido, frena al llegar. */
  --mov-entrada: cubic-bezier(0, 0, 0.2, 1);

  /* Sale de pantalla: arranca suave, acelera al irse. */
  --mov-salida: cubic-bezier(0.4, 0, 1, 1);

  /* Se mueve dentro de la pantalla: acelera y frena. */
  --mov-estandar: cubic-bezier(0.4, 0, 0.2, 1);

  /* Reclama atencion: se pasa y vuelve. */
  --mov-enfasis: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Movimiento continuo y mecanico. */
  --mov-lineal: linear;
}

Y la tabla de aplicación, que es lo que hay que pegar en la documentación:

Sobre --mov-enfasis hay que ser claro, porque es el token que más se abusa. El segundo valor de control por encima de 1 hace que la curva sobrepase el destino y vuelva. Ese sobrepaso, medido en píxeles, es proporcional a la distancia recorrida: en un icono de veinticuatro píxeles se pasa uno o dos y queda vivo; en un panel de seiscientos píxeles se pasa treinta y parece un error de física. La curva de énfasis es solo para elementos pequeños y desplazamientos cortos. Y en la versión de movimiento reducido desaparece: un cambio de dirección brusco es una aceleración, y las aceleraciones son lo que produce conflicto vestibular.

Cuándo lineal es lo correcto

linear tiene mala prensa porque en un desplazamiento se ve mecánico, y eso ha llevado a mucha gente a no usarlo nunca. Hay cuatro casos en los que es la única respuesta correcta.

Rotación continua. Un indicador que gira con ease-in-out acelera y frena en cada vuelta, y el resultado es que parece atascado. La velocidad angular de algo que gira sin parar es constante por definición.

@keyframes girar { to { rotate: 360deg; } }
.cargando { animation: girar 900ms linear infinite; }

Progreso. Una barra que representa un porcentaje real tiene que avanzar proporcionalmente al valor que representa. Suavizar la curva es mentir sobre el dato.

Opacidad pura. Un fundido con curva se percibe casi igual que uno lineal, porque la percepción de luminosidad ya es no lineal por su cuenta. Usar linear en opacidad simplifica y no cuesta nada. Es especialmente conveniente cuando el fundido acompaña a un desplazamiento con otra curva: dejar la opacidad lineal evita que las dos curvas se peleen.

Cualquier cosa ligada al scroll o a un gesto. El progreso lo determina el dedo. Aplicar una curva encima desacopla lo que hace la mano de lo que hace la pantalla, y eso se siente inmediatamente mal. En una animación con animation-timeline, la curva por defecto de los keyframes sigue aplicándose y hay que ponerla en linear explícitamente.

Y el quinto caso, que es distinto: linear() con muchos puntos, la función que aproxima curvas arbitrarias. Es la forma de meter un muelle en CSS puro, y no tiene nada que ver con linear. Se genera desde los parámetros del muelle y no se edita a mano.

Nombrar por el papel

El detalle de nomenclatura que decide si el sistema se usa bien o no: los tokens se llaman por lo que el elemento hace, no por la forma de la curva.

La convención heredada de CSS nombra las curvas por su forma —ease-out significa “suaviza al salir de la curva”— y eso produce una confusión que se repite en todos los equipos: alguien quiere animar la salida de un elemento, busca el token que dice “out”, encuentra ease-out, y lo aplica. Acaba de poner la curva de entrada en una salida. He visto ese error en tantas bases de código que es razonable considerarlo el comportamiento por defecto.

Con nombres por rol el error es imposible: quien está escribiendo la animación de un elemento que se va busca salida y encuentra la curva correcta, sin necesidad de saber qué significa el segundo punto de control de una Bézier ni de haber leído nada. Un buen token de diseño es el que se elige bien sin entender su implementación.

Y un apunte sobre el orden de trabajo, porque afecta al resultado: cuando afines una animación, fija primero la duración con una curva neutra y solo después elige la curva. Duración y curva se compensan mutuamente —una curva más agresiva parece más rápida, una duración más corta parece más agresiva—, y mover las dos a la vez es perseguir dos variables acopladas sin converger nunca.