Generador Bézier cúbico

Escribir cúbica-bezier(x1, y1, x2, y2) a mano y recargar la página para comprobar la sensación es una forma lenta de ajustar una animación. Este generador cierra ese ciclo: arrastre cualquiera de los puntos de control en la curva o escriba números exactos en los campos x1/y1/x2/y2, y la curva, la cadena CSS copiable y la vista previa de la animación en vivo se actualizan con cada cambio: sin paso de compilación, sin recarga.

Los dos ejes funcionan de manera diferente a propósito. x1 y x2 permanecen limitados entre 0 y 1, porque eso es lo que la especificación CSS realmente requiere de una función de temporización cúbica-bezier(): un valor fuera de ese rango simplemente no es válido. y1 e y2 no tienen tal límite: arrastre un controlador por encima de la parte superior del cuadro o por debajo de la parte inferior, y la curva sobrepasa su inicio o su final, que es exactamente como se construyen los efectos de resorte y estilo rebote a partir de una única curva de relajación.

Ver un número no es lo mismo que ver el movimiento, por lo que la vista previa ejecuta dos bolas idénticas una al lado de la otra en un bucle: una se mueve usando su curva personalizada, la otra se mueve a un ritmo lineal constante. Verlos correr es la forma más rápida de saber si una curva de relajación realmente produce la sensación que deseas, antes de que llegue a una hoja de estilo. Las páginas preestablecidas (los números reales detrás de la propia palabra clave de entrada y salida de CSS, una aproximación honesta de exceso que algunos llaman rebote y la curva estándar de Material Design publicada por Google) son puntos de partida listos desde los que puede arrastrar en lugar de puntos de control en blanco.

Todo se ejecuta localmente en su navegador: sin carga, sin cuenta, sin ida y vuelta del servidor, y el generador sigue funcionando sin conexión una vez que la página se ha cargado.