贝塞尔曲线编辑器

可视化调整 cubic-bezier 缓动函数，拖拽控制点实时预览动画效果

贝塞尔曲线编辑

拖拽 P1、P2 控制点调整曲线，预览动画效果

曲线编辑器

拖拽蓝色圆点 P1、P2 调整曲线形状

cubic-bezier 值

cubic-bezier(0.33, 0.67, 0.67, 0.33)

预设缓动方案

动画预览

终点

时长：1.5s 位置：从左到右

CSS 代码

transition-timing-function: cubic-bezier(0.33, 0.67, 0.67, 0.33);

使用说明

用鼠标拖拽 SVG 画布中的蓝色圆点 P1、P2 调整贝塞尔曲线形状
P0（左下）与 P3（右上）为固定起点终点，分别代表动画时间 0%/100%
右侧实时显示 cubic-bezier(x1, y1, x2, y2) 数值
点击预设按钮可快速套用 linear / ease / ease-in / ease-out / ease-in-out / bounce 等常用缓动
点击"重播"按钮预览方块按当前缓动函数做位移动画
点击"复制"按钮将 transition-timing-function CSS 代码复制到剪贴板

适用场景

动画调优：精确控制过渡动画的速度曲线
UI 微交互：按钮点击、菜单展开、卡片悬停
页面转场：路由切换、模态框出现与消失
数据可视化：图表动画、进度条、数字滚动
游戏交互：弹跳、回弹等物理感动画

安全保障

本地计算：所有计算在浏览器本地完成
纯 CSS 输出：生成的代码无任何 JS 依赖
无网络请求：调整过程不发起任何外部请求
免费使用：无需注册登录，打开即用

常见问题

四个参数分别代表什么？

cubic-bezier(x1, y1, x2, y2) 定义一个三次贝塞尔曲线：x1/x2 是两个控制点的横坐标（必须在 0-1 之间，对应时间进度），y1/y2 是纵坐标（对应动画进度，可超出 0-1 实现回弹）。P0 固定为 (0,0) 起点，P3 固定为 (1,1) 终点。

为什么 y 值可以超出 0-1？

x1、x2 必须在 0-1 范围内（时间不能倒流），但 y1、y2 可以小于 0 或大于 1，这表示动画在某个时刻"超过"了最终值或"未到"起始值，从而实现 bounce 回弹、弹簧等效果。比如 bounce 预设就使用了 y 值超出 1 的曲线。

与 transition-timing-function 的关系？

cubic-bezier 是 transition-timing-function 与 animation-timing-function 的可选值之一。CSS 内置的 ease / linear / ease-in 等关键字实际上都是预设的 cubic-bezier：linear = cubic-bezier(0,0,1,1)；ease = cubic-bezier(0.25,0.1,0.25,1)。

SVG 坐标与 CSS 坐标如何对应？

SVG 坐标原点在左上角，y 轴向下为正；CSS 动画进度 y 轴向上为正。本工具已自动转换：SVG 中 y 值越大对应 CSS y 值越小。控制点在 SVG 中的位置直接反映动画曲线的形状。

贝塞尔曲线编辑器