在animation和transition两个属性中，cubic-bezier是控制变化的速度曲线。
cubic-bezier(<x1>,<y1>,<x2>,<y2>)
从上图中我们可以看到，cubic-bezier有四个点：
两个默认的，即：P0(0,0)，P3(1,1)；
两个控制点，即：P1(x1,y1)，P2(x2,y2) （这是我们设置的两个点）
注：X轴的范围是0~1，超出cubic-bezier将失效，Y轴的取值没有规定，但是也不宜过大。
我们只要调整两个控制点P1和P2的坐标，最后形成的曲线就是动画曲线。
常用预设属性
- linear cubic-bezier(0,0,1,1) / cubic-bezier(1,1,0,0)
- ease cubic-bezier(0.25,0.1,0.25,1)
- ease-in cubic-bezier(0.42,0,1,1)
总结
css3动画的速率曲线并不需要了解贝塞尔曲线的核心内容，靠两个控制点去调整。基本easings.net给出的缓动函数能满足大部分的动画需求了。
用了一圈发现其实还是ease最好用
网友评论