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



你传递给cubic-bezier四个不同的实数值,它创建了一个贝塞尔曲线

例如,cubic-bezier(0,0,1,1)创建linear曲线。cubic-bezier(0.25,0.1,0.25,1)生成ease曲线。

但是三次贝塞尔曲线是由平面上的四个点定义的,我们只有四个实值,它们只能描述两个点。

那么这些数字意味着什么呢?

来自MDN:

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

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

最新更新