Cubic Bezier 曲线生成器

CSS cubic-bezier() 缓动曲线可视化编辑器。拖拽控制点、实时动画预览、一键导出 CSS / SCSS / Tailwind 代码。免费、在浏览器中处理。

在浏览器中处理
数据不离开你的设备
免费 · 无需注册

预设选择 12 个预设之一，其中 Material 2 与 Material 3 使用各自的曲线。点击预设会替换四个控制点数值。

P1 X 会限制到 0–1，Y 会限制到 −2–2，用于回拉和过冲。数字框与复制结果最多显示两位小数；预设和拖动的内部数值可保留更多精度。

x y

P2 X 会限制到 0–1，Y 会限制到 −2–2，用于回拉和过冲。数字框与复制结果最多显示两位小数；预设和拖动的内部数值可保留更多精度。

x y

时长预览时长限制为 100–10,000 毫秒。播放从头开始，暂停会停止预览，循环会重复播放。时长和循环选项不会写入生成的缓动函数代码。

毫秒循环

重置恢复 ease-in-out（0.42, 0, 0.58, 1）、1500 毫秒和 CSS 输出，停止播放并清除当前设备保存的设置。工具内控件获得焦点时，Ctrl/⌘+L 执行同样操作。循环选项保持不变。

输出选择 CSS 缓动函数声明、SCSS 变量或 Tailwind 配置片段，再复制当前输出。三种格式使用相同的控制点。

transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

曲线编辑器拖动任一实心圆点编辑曲线。对角线代表线性时间关系。上下滚动预览，可找到方框上方或下方的控制点。

拖拽两个实心圆点，数值实时更新。

动画预览

阅读完整使用指南 Cubic Bezier 生成器：别再瞎猜 CSS 缓动曲线

示例、说明与常见问题带实际输出的示例、与同类工具的差别，以及常见问题。

什么时候需要自定义 cubic-bezier

linear / ease / ease-in / ease-out / ease-in-out 这五个关键字够日常用。你需要自定义 cubic-bezier 的时候通常是：

设计系统已有明确的运动语言 —— Material Design 2 标准曲线 (0.4, 0, 0.2, 1)、Material 3 的 (0.2, 0, 0, 1)、Tailwind 的 ease-in-out。
动画需要 overshoot 或 anticipation —— modal 弹出、抽屉拖拽、按钮按下回弹。
要让 Figma / After Effects 的曲线和上线代码视觉完全一致。

一眼读懂曲线

X 轴是归一化的时间（起点 0，终点 1）；Y 轴是动画进度。对角直线就是 linear。曲线凹在对角线下方代表起步慢、末段追上（ease-in 感）；鼓在上方代表起步快、随后减速（ease-out 感）；先下后上的 S 形就是 ease-in-out。当曲线下探低于 0 或高出 1，就出现「弹簧」效果 —— 适合点缀型 UI，但功能性流程里用多了反而打断节奏。

常用缓动配方

使用场景	推荐曲线	原因
页面/区块入场	`cubic-bezier(0, 0, 0.2, 1)`（decelerate）	开头快、收尾柔，让用户能接住终态。
页面/区块离场	`cubic-bezier(0.4, 0, 1, 1)`（accelerate）	开头慢、离开快，下一屏感觉更利索。
通用过渡	`cubic-bezier(0.4, 0, 0.2, 1)`（Material 2 标准）	快速加速、缓慢减速，适合 hover、focus、小幅位移。
俏皮弹出	`cubic-bezier(0.68, -0.55, 0.265, 1.55)`（back ease）	带预拉和过冲，徽章、Toast、提醒类很好用。
拖拽跟手	`cubic-bezier(0.25, 0.46, 0.45, 0.94)`	平滑减速，接近物理惯性。

预设的出处

每个预设按钮载入下表的四个数。标签写明体系与版本，因为同一个名字可能指不同曲线：Material 3 换掉了 Material 2 的标准曲线，Apple 也不止一个「默认」。

预设	数值	出处
Ease、Ease-In、Ease-Out、Ease-In-Out	`(0.25, 0.1, 0.25, 1)`、`(0.42, 0, 1, 1)`、`(0, 0, 0.58, 1)`、`(0.42, 0, 0.58, 1)`	CSS 关键字，CSS Easing Functions Level 1 §2.2
Material 2 标准 / 减速 / 加速	`(0.4, 0, 0.2, 1)`、`(0, 0, 0.2, 1)`、`(0.4, 0, 1, 1)`	Material Design 2, Speed
Material 3 标准	`(0.2, 0, 0, 1)`	Material 3 easing tokens（md.sys.motion.easing.standard）
Core Animation 默认	`(0.25, 0.1, 0.25, 1)`	CAMediaTimingFunctionName.default，与 CSS `ease` 相同。UIKit 视图动画默认用的是 ease-in-ease-out。
Tailwind In-Out	`(0.4, 0, 0.2, 1)`	Tailwind CSS transition-timing-function（`ease-in-out`）
Back（回弹）	`(0.68, -0.55, 0.265, 1.55)`	常见的回弹曲线，y 值低于 0、高于 1，所以先回拉再冲过终点。

两个控制点的 x 值必须在 0 到 1 之间，因为时间不能倒流，编辑器会自动夹取；y 值可以超出这个范围，Back 预设的回弹就是这样来的。

隐私说明

编辑器完全在你的浏览器里运行，曲线求值、动画预览、复制操作都在本地完成。任何控制点、时长、生成的 CSS 都不会上传。

FAQ

什么是 cubic-bezier 缓动函数？

CSS cubic-bezier(x1, y1, x2, y2) 用四个数定义一条把「时间进度（0 到 1）」映射到「动画进度（0 到 1）」的曲线，曲线两端固定在 (0, 0) 和 (1, 1)，你能调的是中间两个控制点 P1 和 P2。P1.x 与 P2.x 必须落在 [0, 1] 区间内；P1.y 与 P2.y 允许超出 0-1，用来表达 overshoot（过冲）与 anticipation（预拉）。

和 ease、ease-in、ease-out 这些关键字有什么区别？

CSS 关键字其实是 cubic-bezier 的几个固定别名。ease 等价于 cubic-bezier(0.25, 0.1, 0.25, 1)，ease-in-out 等价于 cubic-bezier(0.42, 0, 0.58, 1)。它们一共只有四种形状。自定义曲线让你能精确匹配设计系统标准（Material / iOS / Tailwind）、为某条特定动效细调手感，并在 CSS、SCSS、Tailwind 配置之间复用同一组数值。

为什么 P1.y 或 P2.y 可以超出 0-1 范围？

Y 值小于 0 表示 anticipation（元素先反方向「拉一下」再开始动），大于 1 表示 overshoot（先冲过终点再回弹）。经典回弹曲线 cubic-bezier(0.68, -0.55, 0.265, 1.55) 同时使用了两种效果。X 轴代表时间，必须保持在 [0, 1] 区间，否则不是合法的 CSS timing function。

Tailwind CSS 里怎么用？

在 tailwind.config.js 的 theme.extend.transitionTimingFunction 加一条命名 entry，例如 smooth-out: 'cubic-bezier(0.4, 0, 0.2, 1)'，之后就能用 ease-smooth-out 这个工具类。本工具的 Tailwind 输出模式会直接把这段代码片段生成给你。

我的曲线设置会被保存吗？

控制点位置、预览时长和输出格式会通过 ZeroTool 全站持久化层保存到当前设备的 localStorage，不会上传任何数据。点页面上的 Clear 按钮可以一键复位回默认 ease-in-out。