Cubic Bezier Function
The Bezier curve takes a series of points and produces a smooth path from the first to the last point using a combination of linear interpolations.
A bezier curve with two points, also known as a linear curve, simply produces a line that starts at P0 and ends at P1. This is done using a time value t in the range of 0 through 1. To find the position of the curve at time t, take the weighted average of P0 with weight (1-t) and P1> with weight t. This gives us the parametric equation B(t) = (1-t)P0 + tP1.
To construct a higher order Bezier curve, simply calculate the two Bezier curves produced using all but the last point, and all but the first point, then find the linear interpolation of those two points. This gives the equation BP0:Pn(t) = (1 - t)BP0:Pn-1 + tBP1:Pn
In CSS, one can use an easing function to control the speed of animations. Other than linear and step easing functions, these use cubic Bezier functions to control how quickly the animation runs. This Bezier function has the first and last points fixed at (0, 0) and (1, 1). The two central points can be adjusted however one desires, as long as their x values are between 0 and 1. This constraint ensures the Bezier curve will never cross over itself.