ZeroTool Workbench
Cubic Bezier 曲线生成器
CSS cubic-bezier() 缓动曲线可视化编辑器。拖拽控制点、实时动画预览、一键导出 CSS / SCSS / Tailwind 代码。免费、纯浏览器运行。
什么时候需要自定义 cubic-bezier
linear / ease / ease-in / ease-out / ease-in-out 这五个关键字够日常用。你需要自定义 cubic-bezier 的时候通常是：
- 设计系统已有明确的运动语言 —— Material Design 标准曲线
(0.4, 0, 0.2, 1)、iOS 自然缓动、Tailwind 的ease-in-out。 - 动画需要 overshoot 或 anticipation —— modal 弹出、抽屉拖拽、按钮按下回弹。
- 要让 Figma / After Effects 的曲线和上线代码视觉完全一致。
一眼读懂曲线
X 轴是归一化的时间（起点 0，终点 1）；Y 轴是动画进度。对角直线就是 linear。曲线鼓在对角线下方代表先快后慢（带 ease-in-out 感），鼓在上方代表初速很快然后减速（带 ease-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 标准） | 对称、中性，适合 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) | 平滑减速，接近物理惯性。 |
隐私说明
编辑器完全在你的浏览器里运行，曲线求值、动画预览、复制操作都在本地完成。任何控制点、时长、生成的 CSS 都不会上传。
相关工具
- CSS Clip Path 生成器 — 拖拽控制点的可视化 clip-path 编辑器。
- 毛玻璃生成器 — 实时预览的玻璃拟态参数面板。
- CSS Filter 生成器 — 模糊、亮度、色相旋转等滤镜的滑块编辑器。
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。