∿
贝塞尔缓动曲线
拖动控制点可视化调节 CSS cubic-bezier 缓动曲线,实时预览动画并复制代码。前端动效必备。本地生成。
本地处理 · 不上传
加载工具中…
相关：贝塞尔曲线 · 缓动曲线 · cubic-bezier · CSS动画曲线 · easing
贝塞尔缓动曲线通过拖拽控制点调整动画的加速节奏，实时预览运动效果并输出 cubic-bezier 值。调动画手感时比盲改数字直观得多。
使用步骤
- 拖拽两个控制点调整曲线
- 观察预览方块的运动
- 对照常见预设
- 复制 cubic-bezier 值
使用场景
- 调整界面过渡动画的节奏
- 让弹窗出现更有质感
- 模拟物理感的运动效果
- 统一产品内的动画曲线规范
小贴士
- 先快后慢（ease-out）适合元素进场，先慢后快（ease-in）适合退场——因为用户注意力应该跟随元素到达而非离开。
- 控制点的纵坐标可以超出 0 到 1，从而产生回弹与过冲效果，横坐标则必须在 0 到 1 之间。
- 曲线再好也救不了错误的时长。多数界面过渡在 150 到 300 毫秒之间，超过 500 毫秒就会显得拖沓。
常见问题
和 ease、linear 有什么关系？
CSS 的关键字本身就是预设的贝塞尔值，例如 ease 等于 cubic-bezier(0.25, 0.1, 0.25, 1)，linear 等于 (0, 0, 1, 1)。自定义只是绕开预设直接给点。
为什么纵坐标能超过 1？
纵轴表示动画进度，超过 1 意味着先冲过终点再回来，即过冲效果；小于 0 则是先反向再前进。横轴是时间，不能倒流，所以必须在 0 到 1 内。
能做弹跳效果吗？
三次贝塞尔只有一个起伏，能做单次过冲但做不出多次弹跳。真正的弹跳需要用关键帧动画或 linear() 缓动函数分段定义。
贝塞尔缓动曲线是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用贝塞尔缓动曲线，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。