Cubic Bezier Curve Generator

A Cubic Bézier Curve is a smooth curve defined by four points. The animation begins at the start point (0,0) and ends at the end point (1,1). The first control point (P1) influences the curve's initial direction and speed, while the second control point (P2) influences its ending direction and speed.

To generate the curve, you can drag P1 and P2 within the graph. The X-axis represents time, ranging from 0 to 1, and the Y-axis represents the animation progress, also ranging from 0 to 1.

The curve is calculated using a mathematical formula that determines the animation's progress at any given time. P1 significantly impacts the beginning of the animation. If P1 is positioned above the diagonal line, the animation will start slowly. Conversely, if P1 is below the diagonal line, the animation will begin quickly. Similarly, P2 influences the animation's end. An above-diagonal P2 position results in a slow ending, while a below-diagonal position leads to a quick finish.

To use the curve in your CSS, simply copy the generated cubic-bezier(...) value and paste it into the animation-timing-function property.