Editor de cubic bezier

Arrastra los dos puntos de control de la curva para crear un easing personalizado, o parte de un preset como ease-in-out y ajústalo desde ahí. Los cuatro campos numéricos se mantienen sincronizados con los controles, así que puedes afinar los valores a mano o a simple vista. Una animación de vista previa reproduce tu easing junto a una referencia lineal, lo que facilita ver cuánto acelera o frena el movimiento la curva en comparación con un ritmo constante.

¿Cómo funciona el editor de curvas?

Un easing cubic-bezier() de CSS se define con dos puntos de control, (x1, y1) y (x2, y2), mientras que el inicio y el final de la curva quedan fijos en (0,0) y (1,1). Las coordenadas x representan el tiempo y siempre se limitan al rango 0-1 que exige CSS, pero las coordenadas y, que representan el progreso, pueden salirse de ese rango en este editor (aproximadamente de -1 a 2) para que puedas diseñar un efecto de overshoot, donde el movimiento rebasa su destino antes de asentarse, como en los presets integrados ease-in-back y ease-out-back. Por debajo, la herramienta evalúa la curva igual que lo haría un navegador: para un instante dado busca el punto correspondiente en la curva con varias iteraciones del método de Newton, y recurre a una simple bisección cuando la curva es demasiado plana para que Newton converja rápido.

También puedes pegar un valor cubic-bezier(...) directamente en los campos numéricos, y la herramienta lo interpretará y lo convertirá de nuevo en controles arrastrables, siempre que los valores x estén dentro del rango válido 0-1.

¿Se sube a algún sitio lo que dibujo?

No. El editor de curvas, las matemáticas detrás y la animación de vista previa se ejecutan enteramente en tu navegador. Nada de lo que dibujas se sube a ningún sitio, y no hay ningún servidor de por medio en ningún momento.

Úsalo para ajustar transiciones y animaciones CSS: un ease-out ágil para el clic de un botón, un rebote con overshoot para la entrada de un modal, o una curva personalizada que coincida con la especificación de movimiento de una herramienta de diseño. Copia el valor cubic-bezier() final directo a tu hoja de estilos. Consulta la referencia de easing-function de MDN para ver cómo encaja con transition-timing-function y animation-timing-function, o la referencia de la función cubic-bezier() para la sintaxis exacta.