CSS3 Animation of the five situations of Bessel Curve Cubic-Bezier, CSS3

When you start to do css3 animation, it becomes indispensable to understand the Bezier curve. “Bezier curve” was invented by French mathematician Pierre Bézier, which laid the foundation for computer vector graphics. Its main significance is that it can be described mathematically whether it is a straight line or a curve. Here we mainly talk about the use of Bezier curve in css3, cubic formula, four points are determined
The third-order Bezier curve is determined by four points, then the Bezier function of css3 cubic-bezier(x1,y1 ,x2,y2) What is going on with only two coordinate points?
The Bessel function of css3 should look like this: cubic-bezier(0,0,x1,y1,x2,y2,1,1) 4 points

Among them, 0,0 And 1, 1 are fixed starting and ending positions and cannot be changed, so they are omitted by the abbreviation. We only need to set x1, y1, x2, y2, and the value range is any value between [0,1]. It becomes cubic-bezier(x1,y1,x2,y2) like this

(0,0), (x1,y1), (x2,y2), (1,1) four points form a movement The speed curve is the Bezier curve: it can be divided into the following five cases

Case 1: when x∈[0,0.5], yx . Then the approximate curve looks like this

Case 2: y>x when x∈[0,0.5]; y

Case 3: When x∈[0,1], y>x; then the approximate curve looks like this

Case 4: x∈[0,1] when y< x; The approximate curve looks like this

Case 5: x1 = y1, x2=y2; then the curve must be like this

Now let’s talk about animation-timing-function and transition-timing-function The values ​​corresponding to the five predefined Bezier curves cubic-bezier() in
1.linear: cubic-bezier(0,0,1,1), the animation moves at a constant speed as shown in the figure (a kind of case 5) ：
In fact, as long as x1=y1, x2=y2 can be a uniform speed effect. For example: cubic-bezier(0.25.0.25,0.75,0.75), cubic-bezier(0.1.0.1,0.7,0.7), etc.
Look at the ratio of the ordinate and the abscissa, so linear belongs to one of: y1/x1=1 y2/x2=1;

2.ease: cubic-bezier(0.25,0.1,0.25 ,1), the animation is first slow and then fast and then slow as shown in the figure (a kind of situation 1):

3.ease-in: cubic-bezier(0.42,0,1,1), the animation is slow at first After the quick as shown in the picture (a kind of situation 3):

4.ease-out: cubic-bezier(0,0,0.58,1), the animation is fast and then slow as shown in the figure (a kind of case 4):

5. ease-in-out: cubic-bezier(0.42,0,0.58,1), the animation is first slow, then fast and then slow as shown in the figure (a kind of case 1):
The difference with ease is that it starts slower and ends It’s slower. So ease, ease-in-out belong to one of case 1

Attached: drawing tools http://cubic-bezier.com/

———————— ———————— Copyright Statement: This article is the original article of the CSDN blogger “web_xyk”, and it follows the CC 4.0 BY-SA copyright agreement. Please attach the original source link and this statement for reprinting. Original link: https://blog.csdn.net/web_xyk/article/details/80027701