Generador de curvas cubic-bezier

Qué es una curva cubic-bezier

Las animaciones y transiciones de CSS necesitan una regla que reparta el avance a lo largo del tiempo. `linear` lo reparte por igual; cualquier cosa más interesante es una curva. `cubic-bezier(x1, y1, x2, y2)` te deja dibujarla colocando dos puntos de control entre un inicio fijo en (0, 0) y un final fijo en (1, 1).

La especificación CSS Easing es precisa sobre lo que significan los ejes: los valores de progreso de entrada son las x de la curva, y las y son los valores de progreso de salida. Es decir, la x es cuánto llevas de la duración y la y es cuánto llevas del movimiento. Una curva que sube deprisa al principio y luego se aplana describe algo que arranca rápido y se desliza hasta pararse.

Las cuatro palabras clave conocidas son simplemente curvas con nombre. `ease` es cubic-bezier(0,25, 0,1, 0,25, 1), `ease-in` es (0,42, 0, 1, 1), `ease-out` es (0, 0, 0,58, 1) y `ease-in-out` es (0,42, 0, 0,58, 1). Cualquier curva que arrastres aquí es tan legítima como esas.

Cómo usar el generador

1. Arrastra cualquiera de los dos tiradores. La curva se redibuja al moverlos y el CSS se actualiza con ella. Los tiradores admiten foco, así que las flechas los mueven de 0,01 en 0,01 y con Mayús de 0,1 en 0,1, si prefieres precisión a rapidez.
2. Prueba un ajuste predefinido o sal del cuadro. Las cinco palabras clave de CSS están a un clic. Los dos ajustes con rebote sacan la curva del cuadrado 0–1 a propósito, lo cual es legal y es lo que hace que un movimiento se pase del objetivo y vuelva.
3. Reprodúcela y cópiala. La vista previa se anima con el CSS real, así que la aceleración la calcula el navegador y ves justo lo que verá tu usuario, no una reimplementación. «Copiar» te da la declaración transition-timing-function completa.

El error del que trata de verdad esta página

Una curva de Bézier cúbica es paramétrica. Tanto la x como la y son funciones de un parámetro oculto —llamémoslo s— que va de 0 a 1 y no es ni el tiempo ni el avance. Evaluar la aceleración en el instante t exige por tanto dos pasos: resolver x(s) = t para hallar s y después devolver y(s).

Saltarse esa resolución y meter el tiempo directamente como parámetro es la forma más habitual en que falla el código de aceleración escrito a mano, y no es un error sutil. En `ease`, que es el valor por defecto del navegador, el atajo se equivoca en un 28,74% de todo el recorrido de la animación, con el máximo al 40% del trayecto. En `ease-in` y `ease-out` es un 22,96%.

También hay una trampa a la hora de comprobar tu propio código. `ease-in-out` es casi simétrica, así que el error se compensa en buena medida y queda en un 2,86%, lo bastante poco como para parecer una diferencia de redondeo. Y cubic-bezier(0, 0, 1, 1) es peor todavía: da una recta perfecta, así que parece el caso seguro con el que probar, y el atajo sigue fallando un 9,62% en ella, porque allí x(s) resulta ser 3s² − 2s³ y no s.

De hecho el atajo solo es exacto para una familia de curvas: x1 = 1/3 y x2 = 2/3. Son los únicos puntos de control que convierten x(s) en la identidad y, por tanto, los únicos en los que el parámetro es realmente el tiempo. Cualquier otra curva necesita la resolución.

El panel que hay bajo el editor mide esto para la curva que tengas montada, porque el tamaño del error depende por completo de la curva.

Limitaciones honestas

Los valores de x se limitan a 0–1 y los de y no, y esa es la regla de la especificación, no una decisión tomada aquí: la gramática es cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>). La asimetría no es arbitraria. Con los dos controles de x dentro del intervalo unidad, x(s) crece siempre, de modo que cada instante corresponde a un único punto de la curva; comprobado sobre 200.000 pares aleatorios sin un solo contraejemplo. Saca una x fuera del rango y esa garantía se rompe, que es justo por lo que CSS la rechaza. Dejar la y libre no cuesta nada y a cambio permite el rebote.

El rebote es real y merece verse: el ajuste back-out llega a un progreso de salida de 1,0869 antes de asentarse, y back-in baja antes hasta −0,0969. Esos dos ajustes son convenciones muy extendidas, no parte de CSS, y la página los etiqueta como tales.

El solucionador es Newton-Raphson con respaldo de bisección, que es lo que usan los propios motores de los navegadores. Se comprueba por sustitución y no contra una segunda implementación: el parámetro que devuelve se vuelve a pasar por x y se exige que reproduzca el tiempo con un error menor que una parte por millón, sobre 40.000 curvas aleatorias y sobre las curvas de extremos planos donde Newton se atasca y tiene que entrar la bisección.

Este editor cubre solo cubic-bezier. CSS tiene además `linear()` con paradas arbitrarias y la familia `steps()`, y ninguna de las dos es una Bézier: necesitan otro editor y aquí no se aproximan en silencio.

48 comprobaciones cubren los valores de las palabras clave, el solucionador, la garantía de monotonía y su contraejemplo, las cifras de error publicadas y el formato.

¿Por qué es gratis?

Es una curva, un solucionador y un cuadro de texto, todo ejecutándose en tu navegador. No se sube nada, no hay cuenta y la vista previa usa la animación propia del navegador y no algo servido desde aquí.

El panel de medición tampoco es un extra de pago: es la razón de ser de la página.