CSS贝塞尔曲线在线工具 - cubic-bezier缓动函数可视化

什么是贝塞尔曲线？

cubic-bezier 是 CSS 中定义动画时间函数的参数，通过两个控制点描述速度随时间变化的曲线。调整控制点可以让动画呈现匀速、先快后慢、回弹等不同节奏。

Yeo工具箱的贝塞尔曲线工具提供常用预设和手动调节，实时绘制曲线形状，并用小球动画直观展示缓动效果，帮助你为网页动效挑选合适的 easing 函数。

如何使用Yeo工具箱的贝塞尔曲线？

1. 从常用缓动预设中选择，或手动输入两个控制点坐标
2. 曲线图会实时绘制控制点与曲线形状
3. 点击「播放动画」查看小球沿曲线的运动效果
4. 一键复制生成的 cubic-bezier() 代码

常见使用场景

• 场景1：页面元素入场退场动画的缓动曲线
• 场景2：按钮悬浮、卡片弹出的动效调优
• 场景3：loading 与进度动画的节奏控制
• 场景4：教学 CSS 动画时间函数时的可视化演示

使用小贴士

• x 控制点必须在 0-1 之间，否则过渡函数无效
• y 值超过 1 会产生回弹效果，但运动时间会相应变化

常见问题

Q1: cubic-bezier 的四个参数是什么？

依次是两个控制点的 x1,y1,x2,y2 坐标，其中 x 必须在 0-1 之间。它决定了动画速度随时间变化的曲线，例如 ease 就是 cubic-bezier(0.25, 0.1, 0.25, 1)。

Q2: ease、linear、ease-in 有什么区别？

linear 全程匀速；ease 先快后慢、首尾平滑；ease-in 起步慢逐渐加速，适合进入场景；ease-out 起步快逐渐减速，适合退出场景；ease-in-out 两头慢中间快。

Q3: 怎么让动画更有弹性？

把控制点的 y 值设到 1 以上（如 cubic-bezier(0.34, 1.56, 0.64, 1)）会让小球越过终点再回弹，产生弹性效果。x 值必须保持 0-1。

更新日志

• 2026-08-04 更新：Yeo工具箱 贝塞尔曲线工具正式上线

⚠ 声明：本工具所有数据处理均在您的浏览器本地完成，数据不会被上传到任何服务器。