在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最好用