如何为 CSS 创建自定义的三次贝塞尔缓动曲线？

在图表上拖动两个控制点手柄，输入精确的 x1, y1, x2, y2 值，或选择一个预设。然后在“输出格式”下选择 CSS，点击“复制”即可获取用于 transition-timing-function 的 cubic-bezier() 值。

如何用 cubic-bezier 制作弹跳或过冲效果？

将手柄拖到方框上方或下方，使其 Y 值超出 0-1 的范围。Y 值可以超出该范围，而 X 值则保持在 0 到 1 之间。back-out 和 anticipate 预设是现成的过冲效果起点。

可以。输出格式选项卡包括 CSS、Tailwind、Framer Motion 和 anime.js。它们都格式化相同的四个数字，选择一个选项卡并点击“复制”即可将代码片段放入剪贴板。

将一个值，例如 cubic-bezier(.17, .67, .83, .67)，粘贴到导入框中，然后点击“加载”。如果无法读取到四个数字，你会看到错误信息。曲线也会存储在页面 URL 的哈希部分之后，因此可以分享。

“动效预览”使用了一个你可以更改的“持续时间”设置，默认值较慢是为了让你能仔细研究曲线。缩短“持续时间”，然后使用“重播”来以你计划上线的速度查看动效。

是的。所有工具均可免费使用，无需账号，无需信用卡。处理在你的设备上进行，而不是在我们的服务器上，这正是它能保持免费的原因。

可以。它可在 iOS 和 Android 的主流手机浏览器中运行，无需安装任何东西。

📈

通过拖动控制点设计 CSS 缓动曲线，实时预览动画效果，复制 cubic-bezier() 值。包含过冲/弹跳预设。

在浏览器中运行无需注册，无弹窗无需登录永久免费

加载后可离线使用

拖动青色和玫红色控制点来调整曲线形状

控制点

x1y1x2y2

动效预览

持续时间1.6秒

宽度过渡

CSS 值

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

预设

玫红和青色控制点可拉出方框上方或下方（Y 超出 0-1 范围），以实现 back-out、anticipate 等"超调"/弹跳效果。X 保持在 0-1 范围内（时间不可逆）。

此编辑器完全在浏览器中使用 React 状态和 SVG 构建——曲线计算不依赖任何库。两个可拖动的控制点定义一条 SVG 三次贝塞尔路径，浏览器自身的 CSS 动画引擎通过将生成的 cubic-bezier() 值直接注入 @keyframes 规则来运行动效预览。

1
拖动或输入控制点
两个控制柄（青色的 P1 和玫红色的 P2）位于 SVG 画布上。拖动使用 Pointer Events API 和 setPointerCapture，因此即使超出 SVG 边界，控制柄也会跟随你的手指或光标。你也可以用方向键微调控制柄，或在 x1/y1/x2/y2 数字输入框中输入精确值。
2
SVG 实时绘制曲线
曲线是一个 SVG <path> 元素，其 C（三次贝塞尔）命令在每次状态更新时根据四个控制点坐标重新计算。没有 canvas、没有外部库——由浏览器的 SVG 渲染器直接绘制路径。
3
浏览器 CSS 引擎预览缓动
三个实时动画（滑动的圆点、宽度过渡和缩放）运行内联注入了 cubic-bezier() 值的 CSS @keyframes。由浏览器自身的动画引擎解释曲线，因此你看到的正是生产环境 CSS 会产生的效果。
4
按你所用框架的语法复制代码片段
标签页将同样的四个数字格式化为 CSS transition-timing-function、Tailwind 任意值类、Framer Motion 缓动数组或 anime.js 缓动字符串。代码片段通过 navigator.clipboard 写入剪贴板。曲线还会编码在网址哈希中（#b=x1,y1,x2,y2），方便分享或收藏。