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

Question

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

例如，cubic-bezier(0,0,1,1) 创建一条 linear 曲线。 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：

三次贝塞尔曲线由四个点 P0、P1、P2 和 P3 定义。 P0 和 P3 是曲线的起点和终点，在 CSS 中这些点是固定的，因为坐标是比率（横坐标是时间的比率，纵坐标是输出范围的比率）。 P0为(0, 0)，代表初始时间和初始状态，P3为(1, 1)，代表最终时间和最终状态。

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