CSS 缓动曲线编辑器, 拖两个控制点出曲线, 实时预览弹球 / 缩放 / 淡入三种动画, 一键复制 cubic-bezier 字符串。
- 本地处理
- 分类 生成器
- 适合 从空白开始,先拿到一版可修改的结果。
拖动 P1 / P2, 或挑一个预设。Y 可以超出 0–1, 做 overshoot / 回弹。
cubic-bezier(0.42, 0, 0.58, 1)
这个工具能做什么
给真正要做动效的前端用的贝塞尔曲线编辑器。300×300 的 SVG 上拖两个 控制点, 旁边的数字输入框双向同步, X 按 CSS 规范限定在 [0, 1] 区间, Y 不限制, 把 P1 拉到 0 以下、P2 拉到 1 以上, 就能做出 anticipate (蓄力回拉)、overshoot (过冲) 和 bounce (回弹) 这一系列 曲线, 跟 Robert Penner 原版那本 tween 库里画的一模一样。 三个动画预览同时跑, 共用一个 requestAnimationFrame 循环, 永远同步: 水平移动的小球 (动效圈"timing 对不对"的标准压力测试)、缩放的方块 (能感受到 scale 的速度变化, 不只是位置)、淡入加旋转的方块 (透明度 overshoot 这种静态稿里看不出来的问题, 在这里一眼能发现)。 时长 200ms–3000ms 滑块可调, 播放 / 暂停 / 重置, 一条曲线 300ms 看着行, 切到 1.2s 还能不能立住, 当场就能验证。 内置 20 个精挑的预设, 按 5 个分组排好: CSS 标准 5 条 (linear / ease / ease-in / ease-out / ease-in-out); Material Design 3 的 4 个 motion token (emphasized / standard / decelerated / accelerated, 数值直接抄自 m3.material.io); iOS 系统 3 条 (default / easeInQuint / easeOutQuint, 取自 WebKit CACurves);弹性家族 (anticipate / overshoot / bounce / elastic / soft-back), 不用每次都翻 Robert Penner 的公式;再加 Toolora 自家 的 2 条品牌曲线 (aurora-flow / aurora-bounce)。 5 种导出格式都有:CSS `cubic-bezier(...)`、JavaScript 数组、可以直 接粘到 Framer Motion `transition.ease` 的代码、GSAP 的 `CustomEase.create(...)` 调用 (GSAP 作者本人推荐的写法)、以及给 Figma / Penpot / 文档用的 SVG `M…C…` 路径。 100% 浏览器本地运行, 不依赖任何动画库, 求解曲线的代码就 200 行 Newton-Raphson 加二分回退, 跟 Chromium `cubic_bezier.cc` 里 用的是同一套算法。
工具细节
- 输入
- 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 22 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 生成器 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
三次贝塞尔曲线编辑器 适合怎么用
适合快速生成初稿、起步素材或结构化结果,再人工整理后发布。
适合生成任务
- 从空白开始,先拿到一版可修改的结果。
- 生成可重复使用的草稿、名称、模板或占位素材。
- 先探索多个选项,再挑最适合当前任务的。
生成检查项
- 生成内容发给客户、上页面或进文档前,必须人工看过。
- 有品牌语气、格式或受众要求时,不要沿用默认值。
- 只保留真正符合任务的部分。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
- 1 代码截图生成器 代码截图生成器, 类 Carbon.now.sh, 12 种主题 + 12 种渐变背景 + 窗口装饰, 一键导出 PNG/SVG, 适合发推/写博/技术分享。 打开
- 2 CSS 阴影生成器 Pro CSS 阴影生成器 Pro 版, 支持多层 box-shadow / text-shadow / filter:drop-shadow 三合一, 内置 Material/Tailwind/Apple/极光 4 套预设, 含暗色模式预览。 打开
- 3 CSS transform 生成器 CSS transform 生成器,rotate/scale/skew/translate (含 3D) 实时预览,一键复制 CSS,12 个预设组合。 打开
真实使用场景
90 秒搞定设计系统里的"主缓动"token
团队要给按钮、modal、drawer 定一条"主缓动曲线"。打开工具, 点 `M3 emphasized`, 看三个预览: 给按钮 hover 用顺不顺? scale 顺不顺? 透明度顺不顺? 觉得 hover 太冲就把 P2.x 往左拖 0.02, 满意了复制 CSS, 在你的 `motion.css` 里定义成 `--ease-primary`, 团队所有人引用同一个变量。不然就是 5 个工程师各自从 Stack Overflow 抄一个略有差别的 `cubic-bezier(...)`, 谁都不一样, 没法 review。
上线前调试一个"感觉不对"的动画
设计师发你一个 Framer 原型用了自定义曲线, 你照着 port 到 CSS, 总觉得不对。 把那 4 个数字粘到这里, 点 play, 看小球。 十次 有九次是时长不对 (Framer 原型默认 600ms, 你 CSS 写 250ms, 同一条曲线感觉差很远); 第十次是 Framer 那个数组是 (x1, y1, x2, y2), 你抄成了 (y1, x1, y2, x2)。 不管哪种原因, 十秒钟 找到, 不是耗一下午调 DevTools。
长动画用什么曲线? 在 1.4s 时长下挑
1.4s 的 hero 入场和 400ms 的 hover, 用同一条曲线感觉完全不 同, 时长长会暴露曲线中间那段的形状。在这里把时长设成 1400ms, 在 `ease-out`、 `m3-decelerated`、 `ios-easeOutQuint` 之间切, 按 1.4s 的实际感觉挑, 别从 400ms 预览推断出来。
把设计师在 Figma 里画的 spring 曲线还原到 CSS
Figma 的 spring 预设没法干净地翻译到 CSS, 因为 spring 是物理 模拟, bezier 是参数曲线。但是大多数 UI 动画用户分不出区别, 挑 `overshoot` 或者 `aurora-bounce` 调一下 overshoot 幅度 (P2.y), 让预览跟 Figma 看着差不多就行。眼睛过一遍, 出 CSS 上线, 省下一个动效库的 200kb JS。
验证一下透明度 easing 会不会"闪一下"
常见 bug:一条好看的 overshoot 曲线应用到 opacity 上会闪, 因为 opacity 封顶在 1, 曲线得在 1 那里"等"一段再下来。 把 `bounce` 选上, 看"淡入 + 旋转"那个预览, Y > 1 的那段 fade 会肉眼可见地停一下。你就知道这条曲线不能用在 opacity 上, 换 `m3-decelerated` (Y 永远在 [0,1] 内) 再 ship。
把 SVG path 形式的 easing 反推回 bezier
接手了一个 GSAP CustomEase, 路径是 `M0,0 C0.34,1.56 0.64,1 1,1`, 想知道对应的 bezier 是什么。把中间那两个控制点 (0.34, 1.56) 和 (0.64, 1) 填进数字输入框, 实时预览马上出来, 你就能决定保留还是换成 CSS 标准关键字。
常见踩坑
给 opacity 用 bounce / overshoot。 opacity 封顶在 1, Y > 1 的那段会被截成"停在不透明"的卡顿, 视觉上就是闪一下。 这类曲线只用在 transform (位移 / 缩放 / 旋转) 上。
用错时长来调曲线。同一条曲线 1.2s 顺滑, 250ms 可能就拖沓, 因为 250ms 内眼睛根本看不到曲线中段。先定生产时长, 再调曲线。
跨库的参数顺序搞错。 CSS 是 `(x1, y1, x2, y2)`, Framer Motion 的 `ease` 数组顺序一样, GSAP CustomEase 要的是 SVG path。混着用, 曲线就会"看着差不多但又不对"。
在数字输入框里把 X 拖到 [0, 1] 之外, 然后惊讶为什么被 clamp。 CSS 规范要求 X (时间轴) 必须在 [0, 1] 之内, 只有 Y 可以 overshoot。
一律用 `linear` 因为"中性"。 线性运动看起来很机械, 现实里几乎没有线性运动。入场默认 `ease-out`, 状态切换默认 `ease-in-out`, 都比 linear 好。
把 `cubic-bezier` 当成"控制速度"。它只控制"运动的形状", 不控制总时长。同一条曲线 150ms 显得利落, 800ms 就拖沓, 形状和时长缺一不可。
隐私说明
所有计算都在你的浏览器里。4 个 bezier 数字、选的预设、调的 时长、复制的格式, 没有一个字节走服务端。 没有"用户用了哪个 预设"的统计, 没有"你调了什么曲线"的打点, 不需要注册, 工具本身 不种 cookie。曲线求解 (Newton-Raphson + 二分回退) 是 ~200 行 纯 JavaScript, 完全本地运行; SVG 编辑器是原生 SVG 配 React 事件, 不用 canvas、不用 WebGL、不用任何第三方动画库。打开、调好、 关闭标签页, 没有一个字节离开你的设备。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。