css - CSS3 动画计时函数 cubic-bezier() 的参数是什么意思？

Question

您将 cubic-bezier 传递给四个不同的实数值，它会创建一条贝塞尔曲线。

例如，cubic-bezier(0,0,1,1) 创建一条线性 曲线。 cubic-bezier(0.25,0.1,0.25,1) 创建一个ease 曲线。

但是a cubic bezier curve is defined by four points on a plane ，我们只有四个实际值，只能描述两个点。

那么这些数字是什么意思呢？

Answer 1

来自MDN :

A cubic Bézier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios (the abscissa the ratio of time, the ordinate the ratio of the output range). P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

因此起点和终点自动固定在 (0, 0) 和 (1, 1) - 您实际上是在设置内部两个点(P1 和 P2)。