三次贝塞尔曲线生成器
拖拽控制点或用数值输入生成 cubic-bezier 缓动曲线：实时动画预览、合法性与过冲检查、输出 CSS transition-timing-function 与 SVG 曲线。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
控制点
可以直接拖动曲线上的两个圆点调整控制点
x 必须在 0–1 之间，y 可以是任意数值（超出 0–1 即为过冲）
动画预览
CSS 输出
.example {
transition-timing-function: ease;
transition: transform 0.4s ease;
animation-timing-function: ease;
}关键字: ease
这个工具能做什么
- 想做出「弹一下」或「慢进快出」的手感时，拖动两个控制点直接看动画预览，比反复改数值试快得多。
- 拿到设计给的 cubic-bezier(…) 字符串时粘贴进来解析，立刻看到曲线形状、是否过冲，以及对应的 CSS 关键字。
- 确认曲线是否与 linear / ease / ease-in / ease-out / ease-in-out 完全一致——一致时输出会直接用关键字，代码更短。
- 检查过冲曲线：y 超出 0–1 会提示可能出现视觉抖动，发布前先确认这是想要的效果。
示例
输入
cubic-bezier(0.34, 1.56, 0.64, 1)
输出
.example {
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}y 值 1.56 超出 0–1，所以工具会同时提示这是一条过冲（回弹）曲线；换成 cubic-bezier(0.42, 0, 0.58, 1) 则直接输出关键字 ease-in-out。
常见问题
x 和 y 的取值范围有什么不同？
x1 和 x2 必须在 0–1 之间，超出会直接报「曲线不合法」，因为时间不能倒流；y1 和 y2 可以是任意数值，超出 0–1 就是过冲（回弹）效果，工具会给出提示但不会阻止你使用。
为什么我输入的曲线被输出成了关键字？
四个值恰好等于某个 CSS 关键字时（linear、ease、ease-in、ease-out、ease-in-out），输出会用关键字而不是 cubic-bezier(…)，因为两者完全等价而关键字更短。想强制保留数值，把任意一位小数稍微改一下即可。
解析输入支持哪些写法？
cubic-bezier(0.25, 0.1, 0.25, 1)、0.25, 0.1, 0.25, 1 和 0.25 0.1 0.25 1 都能识别，逗号和空格混用也没问题，但必须正好四个数字，否则提示「请输入合法的 cubic-bezier」。
过冲曲线会有什么问题？
y 超出 0–1 意味着动画会越过终点再回弹，视觉上很生动，但在某些布局里可能造成文字抖动、元素溢出容器或与其他动画叠加时显得突兀。工具只做提示，用不用由你决定。
曲线预览是真实计算的吗？
是。工具用牛顿迭代加二分兜底求解 x 对应的参数 t，再算 y，和浏览器渲染 CSS 缓动的方式一致；采样表里的每一行都是这样算出来的，不是近似插值。
关键词：cubic-bezierbezier贝塞尔easing缓动transition-timing-functionanimation动画csstiming function缓动函数