标签：web 曲线 自定义 cubic ease bezier 取值

css3 animation模块，其中animation-timing-function 和 transition-timing-function两个属性来控制动画速度分别提供了ease，liner，ease-in，ease-out，ease-in-out几个预设速度，还可以同过cubic-bezier来自定义速度，想要深入了解CSS3动画，实现随心所欲的动画效果，还是有必要理解下其中的原理。

CSS3动画速度的控制通过三次贝塞尔曲线函数实现，定义规则为

cubic-bezier (x1,y1,x2,y2)

cubic-bezier又称三次贝塞尔，主要是为 animation 生成速度曲线的函数，规定是 cubic-bezier(, , , )。 从下图中简要理解一下 cubic-bezier：

从上图我们需要知道的是 cubic-bezier 的取值范围:

P0：默认值 (0, 0)
P1：动态取值 (x1, y1)
P2：动态取值 (x2, y2)
P3：默认值 (1, 1)

我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。 形成P0到P3曲线就是贝塞尔曲线。

一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（x1,y1,x2,y2），最后形成的曲线就是动画的速度曲线。

.animation {
    transition: all 2s cubic-bezier(.65,.13,.22,.88);
}
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

CSS3提供的几个预设速度：

几个常用的固定值对应的 cubic-bezier 值以及速度曲线

1.ease 对应自定义cubic-bezier(.25,.01,.25,1),效果为先慢后快再慢；

2.linear 对应自定义cubic-bezier(0,0,1,1)，效果为匀速直线；

3.ease-in 对应自定义cubic-bezier(.42,0,1,1),效果为先慢后快；

4.ease-out 对应自定义cubic-bezier(0,0,.58,1),效果为先快后慢；

5.ease-in-out 对应自定义cubic-bezier(.42,0,.58,1),效果为先慢后快再慢。

来回缓冲效果：cubic-bezier(0.68, -0.55, 0.27, 1.55) 如下图

标签：web,曲线,自定义,cubic,ease,bezier,取值
来源： https://blog.csdn.net/wewfdf/article/details/102733216

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。