CSS 贝塞尔曲线生成器 — 拖出曲线，当场看它动
拖动两个控制点，下面那颗小球就是这条缓动的手感。
预设
拖动两个控制点
cubic-bezier(0.25, 0.1, 0.25, 1)= ease
在你的设备上运行 你粘贴的内容由你自己的浏览器处理，不会发送到任何服务器，离开页面后也不会留在任何地方。
一句话答案
CSS 缓动曲线可以在浏览器里免费生成：拖动三次贝塞尔曲线的两个控制点，然后复制得到的 cubic-bezier() 值。CSS 时间函数的首尾两点固定在 0,0 和 1,1，所以整条曲线由四个数字决定 —— 两个控制点各自的 x 和 y。曲线下方有一颗小球按这条缓动实际运动，让曲线的手感直接看得见；linear、ease、ease-in、ease-out、ease-in-out 这五个 CSS 关键字也都做成了预设，既能当起点，也能用来对照。
一览
| 支持输入 | 无需粘贴 —— 曲线是拖出来的 |
|---|---|
| 输出格式 | cubic-bezier() 值、CSS 声明、数组或进度表 |
| 处理方式 | 浏览器本地 |
| 价格 | 免费，无次数限制 |
| 账号 | 无需注册 |
四个数字是没有人能凭直觉想象的东西，所以这个页面做成了拖拽而不是四个输入框。曲线就是运动本身的形状：横轴从左到右是时间，纵轴从下到上是进度，某一段越陡，那一段就越快。
真正能一句话结束争论的是那个预览。两条曲线在网格上看着几乎一样，在屏幕上的手感却可能完全不同 —— 结尾收得又晚又急，看起来利落；同一条压平百分之十，就显得拖沓。所以小球是按你选的时长、用真正的时间函数在走，而不是按某个固定的演示速度。
控制点可以被拖到带状区域的上方或下方。这不是 bug：y 大于 1 意味着动画会冲过终点再回落，而这正是用一条曲线写出「回弹」的方式。x 始终被限制在 0 到 1 之间，因为控制点超出这个范围的时间函数会被 CSS 拒绝 —— 那时它已经不再是时间的函数了。
使用步骤
- 1
拖动两个控制点
也可以从预设开始 —— linear、ease、ease-in、ease-out、ease-in-out —— 再在它基础上调。控制点聚焦后，方向键每次移动 0.01，按住 Shift 则是 0.1。
- 2
看那颗小球
它按你的曲线、以所选时长运动，并在两端各停一下，所以起步和收尾都看得清。
- 3
选择要什么结果
纯 cubic-bezier() 值、可直接用的 transition 与 animation-timing-function 声明、四个数字的 JavaScript 数组，或者每十分之一时长处的进度数值。
- 4
复制
复制到剪贴板，或者下载成文本文件。
常见问题
cubic-bezier() 里的四个数字是什么意思？
它们是两个控制点：x1、y1、x2、y2。P0 固定在 0,0（时间未过、进度为零），P3 固定在 1,1（时间走完、进度走满），所以只有中间两个点由你决定。x 是时长的比例，y 是变化量的比例。
为什么控制点能拖出上下边界，却不能超出左右？
y 大于 1 或小于 0，表示动画会冲过终点再回来 —— 回弹或预备动作 —— 这在 CSS 里完全合法。而 x 超出 0 到 1 会让曲线内部的时间倒流，规范并不允许。
CSS 那几个关键字对应哪条曲线？
linear 是 cubic-bezier(0, 0, 1, 1)，ease 是 (0.25, 0.1, 0.25, 1)，ease-in 是 (0.42, 0, 1, 1)，ease-out 是 (0, 0, 0.58, 1)，ease-in-out 是 (0.42, 0, 0.58, 1)。这五条都在预设里；当你的曲线正好等于其中一条时，读数旁边会标出它的关键字名。
那个「进度数值」输出有什么用？
用在 CSS 到不了的地方实现同一条缓动 —— canvas 动画、Lottie 文件，甚至电子表格。它列出 0%、10% 一直到 100% 处的进度，是从曲线上解出来的，不是近似估的。
animation 也能用吗，还是只有 transition？
都能用。同样这四个数字也放进 animation-timing-function，这正是 transition 那个输出里一并给出它的原因。注意在关键帧动画里，时间函数作用于每两个关键帧之间，而不是整段序列。