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）。