CSS3 三次贝塞尔曲线(cubic-bezier)

理解CSS3动画：自定义三次贝塞尔曲线

最新推荐文章于 2025-09-12 09:27:25 发布

原创

最新推荐文章于 2025-09-12 09:27:25 发布 · 3.7w 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端 #animation

本文介绍了CSS3动画中的自定义速度控制——三次贝塞尔曲线，解析了其原理、规则和用法。通过理解贝塞尔曲线如何通过控制点B(x1,y1)和C(x2,y2)来影响动画速度变化，读者可以更好地实现随心所欲的动画效果。文章还列举了CSS3预设速度与对应的贝塞尔曲线参数，并提供了一个演示示例。" 124536046,1139379,CMake找不到xxx-flight-algorithms包配置文件错误解析,"['C++', '开发语言', '软件构建']

最近在看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)

原理

看一下什么是三次贝塞尔曲线，以及这几个参数的含义：

贝塞尔曲线坐标系
贝塞尔曲线通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形，绘制出一条光滑曲线并以曲线的状态来反映动画过程中速度的变化。
参数点
分别用A,B,C,D表示这四个点，其中起始点固定值为A(0,0),终止点固定为D(1,1)剩下的中间点B(x1,y1),C(x2,y2)也就是所要动态操控的两个点了,对应cubic-bezier (x1,y1,x2,y2)中的四个参数,通过改变B,C两点的坐标值来动态生成一条贝塞尔曲线表示动画中的速度变化。