CSS 三次贝塞尔曲线生成器

CSS 三次贝塞尔曲线生成器 是什么？

CSS 三次贝塞尔曲线生成器是一款免费的可视化缓动函数编辑器，用于 CSS 过渡和动画，专为前端开发者和动效设计师打造。在 cubic-bezier 模式下，拖动两个控制点（或直接输入）来塑造曲线：x 值保持在合法的 0–1 范围内，而 y 值可超过 1 或低于 0，制造回弹与预备。steps() 模式用于阶梯计时，可调节步数并选择 jump 项——jump-start、jump-end、jump-none 或 jump-both，其中 step-start 与 step-end 即 steps(1, …)。实时动画预览会以你设定的时长，在一个移动并缩放的方块上播放当前缓动；你可叠加任意预设作为幽灵曲线对比，也可导入现有的 cubic-bezier() 或 steps() 字符串。复制精确的声明用于 transition-timing-function 或 animation-timing-function。

如何使用 CSS 三次贝塞尔曲线生成器

1. 在顶部选择 cubic-bezier() 或 steps() 模式，或打开设置以 ease、ease-in-out 或 linear 等预设作为起点。
2. 在 cubic-bezier 模式下，拖动图上的两个手柄，或输入精确的 x1、y1、x2、y2 值；把 y 推到 1 以上以产生回弹。
3. 在 steps() 模式下，设置步数并选择 jump 项（jump-start、jump-end、jump-none 或 jump-both）来绘制阶梯。
4. 按播放以在移动并缩放的方块上运行实时动画，并调整以秒计的时长来感受节奏。
5. 在设置中选择对比曲线，将预设作为幽灵叠加到同一张图上；或把数值粘贴到导入并应用。
6. 复制生成的 cubic-bezier() 或 steps() 值，粘贴到你的 transition-timing-function 或 animation-timing-function。

示例

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

steps 模式，N 4，jump-end

steps(4, jump-end)

常见问题

cubic-bezier 的四个数字是什么意思？

它们是两个控制点的坐标：第一个点为 x1、y1，第二个点为 x2、y2。曲线总是从 (0,0) 开始、到 (1,1) 结束；控制点让曲线在中间弯曲，从而控制被动画属性随时间加速和减速的方式。

steps() 模式有什么用？

steps() 在固定数量的值之间跳变，而不是平滑插值——适合精灵图动画、跳动计数或逐帧效果。设置步数与 jump 项：jump-start、jump-end、jump-none 或 jump-both。step-start 等同于 steps(1, jump-start)，step-end 等同于 steps(1, jump-end)。

实时动画预览如何工作？

按播放，方块会用你当前的缓动在轨道上移动并缩放，来回往复。改变以秒计的时长即可放慢或加快；它使用纯 CSS 动画，把你的 cubic-bezier() 或 steps() 值作为计时函数。

我可以导入现有的缓动值吗？

可以。把 cubic-bezier(...) 或 steps(...) 值，或 ease-in-out、step-start、step-end 等关键字粘贴到导入字段并应用；编辑器会将其解析回控制点或步进设置。

我的数据会发送到服务器吗？

不会。整个编辑器都在你的浏览器中通过 JavaScript 运行——控制点和曲线都在本地计算，绝不上传，因此既能保护隐私，页面加载后甚至还能离线使用。