贝塞尔曲线是计算机图形学中常用的参数曲线，在CSS里主要用于控制动画的过渡速率，让元素的属性变化不再生硬，呈现出更自然的动态效果。CSS原生支持的贝塞尔曲线基于三次贝塞尔曲线模型，通过四个控制点来定义曲线的形状，其中起点和终点是固定的，开发者只需要调整中间两个控制点的坐标就能得到不同的曲线效果。
CSS贝塞尔曲线的基础语法
CSS中通过cubic-bezier()函数来定义贝塞尔曲线，该函数的语法格式如下：
/* 四个参数分别对应两个控制点的x和y坐标，取值范围可以是任意数值 */ /* 起点固定为(0,0)，终点固定为(1,1) */ cubic-bezier(x1, y1, x2, y2)
其中x1和x2的取值范围建议在0到1之间，这样能保证曲线的时间进度是正向的，不会出现动画倒放的情况。y1和y2的取值范围没有限制，超过1或者小于0的时候会产生回弹、超出目标值等特殊动画效果。
常见的预设贝塞尔曲线
CSS已经内置了几个常用的贝塞尔曲线预设，开发者可以直接使用，不需要手动计算参数：
- ease：默认值，慢-快-慢的过渡效果，对应
cubic-bezier(0.25, 0.1, 0.25, 1) - linear：匀速过渡，对应
cubic-bezier(0, 0, 1, 1) - ease-in：慢入快出，对应
cubic-bezier(0.42, 0, 1, 1) - ease-out：快入慢出，对应
cubic-bezier(0, 0, 0.58, 1) - ease-in-out：慢入慢出，对应
cubic-bezier(0.42, 0, 0.58, 1)
自定义平滑贝塞尔曲线的方法
要得到更贴合需求的平滑贝塞尔曲线，需要手动调整cubic-bezier()的参数。通常可以通过在线贝塞尔曲线调试工具来可视化调整参数，观察曲线的变化趋势，再代入到CSS代码中使用。
比如我们需要一个先快速变化，再缓慢接近终点的平滑曲线，可以设置两个控制点的x坐标偏小，y坐标偏大，示例参数如下：
/* 自定义平滑贝塞尔曲线参数 */
.custom-bezier {
transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
实际动画案例演示
下面通过一个元素位移的动画案例，展示如何使用自定义的贝塞尔曲线实现平滑的动画效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS贝塞尔曲线动画示例</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #4a90e2;
border-radius: 8px;
/* 初始位置 */
transform: translateX(0);
/* 设置过渡属性和贝塞尔曲线 */
transition: transform 2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.box:hover {
/* 鼠标悬停时移动到右侧300px位置 */
transform: translateX(300px);
}
</style>
</head>
<body>
<div class="box"></div>
<p>鼠标悬停在蓝色方块上，查看平滑的过渡动画效果</p>
</body>
</html>
上面的代码中，当鼠标悬停在方块上时，方块会向右移动300px，整个移动过程使用自定义的贝塞尔曲线控制速率，不会出现生硬的匀速运动，视觉上更加平滑自然。
注意事项
- 如果两个控制点的x坐标相同，可能会导致曲线出现垂直段，使得动画在同一时间点出现多个状态，造成动画卡顿
- 当y值超出0到1的范围时，元素属性可能会暂时超过目标值，比如位移时先超过终点再回弹到终点位置，需要根据需求合理使用
- 贝塞尔曲线主要用于控制动画的时间速率，不能直接用来绘制视觉上的曲线图形，如果需要绘制可见的曲线图形，需要结合SVG或者Canvas实现
CSS贝塞尔曲线cubic-bezieranimationtiming_function修改时间：2026-06-28 20:21:33