关于cubic-bezier

在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的坐标,最后形成的曲线就是动画曲线。


常用预设属性

  1. linear cubic-bezier(0,0,1,1) / cubic-bezier(1,1,0,0)
  2. ease cubic-bezier(0.25,0.1,0.25,1)
  3. ease-in cubic-bezier(0.42,0,1,1)

总结

css3动画的速率曲线并不需要了解贝塞尔曲线的核心内容,靠两个控制点去调整。基本easings.net给出的缓动函数能满足大部分的动画需求了。
用了一圈发现其实还是ease最好用


参考

贝塞尔曲线——cubic-bezier详解
缓动函数

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容