In CSS, the cubic-bezier curve is used to control how the animation

will play throughout. The shape of the curve represents the animation play.

The curve lies on a 1 by 1 co-ordinate system.The X-axis implies the 

duration(time) of the animation. The Y-axis implies the change in the 

animation. The curve mainly has four points of which two points are specific.

The two points are the origin O(0,0) and the other is (1,1).

The other two points are defined by us (x1,y1) and (x2,y2).

​

​

​

The code goes like this--

​

animation-timing-function: cubic-bezier(x1,y1,x2,y2);

​

​

​

​

​

The co-ordinate system--

                                (Y-AXIS)

         [CHANGE IN ANIMATION]   /|\

                                  |  

                                  |                 . (1,1)

                                  |

                                  |

                                  |

                                  |

                                  |             

                                  |                                   (X-AXIS)

     /____________________________._________________________________\

     \                     o(0,0) |                                 /

                                  |                     [DURATION IN ANIMATION]

                                  | 

                                  |

                                  |

                                  |

                                  |

                                  |

                                  |

                                 \|/

​

​

​

void recursive_bezier(double x1, double y1, 

                          double x2, double y2, 

                          double x3, double y3, 

                          double x4, double y4)

    {

​

        // Calculate all the mid-points of the line segments

        //----------------------

        double x12   = (x1 + x2) / 2;

        double y12   = (y1 + y2) / 2;

        double x23   = (x2 + x3) / 2;

        double y23   = (y2 + y3) / 2;

        double x34   = (x3 + x4) / 2;

        double y34   = (y3 + y4) / 2;

        double x123  = (x12 + x23) / 2;

        double y123  = (y12 + y23) / 2;

        double x234  = (x23 + x34) / 2;

        double y234  = (y23 + y34) / 2;

        double x1234 = (x123 + x234) / 2;

        double y1234 = (y123 + y234) / 2;

​

        // Try to approximate the full cubic curve by a single straight line

        //------------------

        double dx = x4-x1;

        double dy = y4-y1;

​

        double d2 = fabs(((x2 - x4) * dy - (y2 - y4) * dx));

        double d3 = fabs(((x3 - x4) * dy - (y3 - y4) * dx));

​

        if((d2 + d3)*(d2 + d3) < m_distance_tolerance * (dx*dx + dy*dy))

        {

            add_point(x1234, y1234);

            return;

        }

​

        // Continue subdivision

        //----------------------

        recursive_bezier(x1, y1, x12, y12, x123, y123, x1234, y1234); 

        recursive_bezier(x1234, y1234, x234, y234, x34, y34, x4, y4); 

    }

​

​

    void bezier(double x1, double y1, 

                double x2, double y2, 

                double x3, double y3, 

                double x4, double y4)

    {

        add_point(x1, y1);

        recursive_bezier(x1, y1, x2, y2, x3, y3, x4, y4);

        add_point(x4, y4);

    }