cubic-bezier 缓动曲线编辑器 —— 在线调 CSS 动画曲线
缓动曲线编辑器让你拖动两个控制点，实时画出 CSS 的 cubic-bezier() 缓动曲线，并同步播放一个小球动画看真实手感，一键复制可直接用在 transition / animation 的 timing-function。设计猫纯前端、不依赖任何框架，曲线全在你浏览器里算。
缓动曲线编辑器是设计猫的免费在线工具，全程在你的浏览器本地完成：打开即用、做完即下载。文件不上传服务器，无需注册、无次数限制。
拖动两个控制点塑造曲线
cubic-bezier(0.34, 1.56, 0.64, 1)
纯前端、实时演示，复制即用。
cubic-bezier 缓动曲线到底在调什么？
CSS 动画里，缓动函数（timing-function）决定了「同样一段距离、同样一段时间，运动的快慢节奏」。linear 是匀速，看起来机械；现实里物体总是有加速度，所以 ease、ease-out 这类带加减速的曲线才显得自然。cubic-bezier(x1, y1, x2, y2) 用两个控制点定义这条节奏曲线：横轴是时间(0→1)、纵轴是完成进度(0→1)。第一个控制点 (x1,y1) 控制起步阶段，第二个 (x2,y2) 控制收尾阶段——把起点拉得平缓就是「慢启动」(ease-in)，把终点拉得平缓就是「慢停下」(ease-out)。设计猫让你直接拖这两个点，不必在脑子里换算数字。
一个常被忽略的能力是：纵轴 y 允许超出 0–1 的范围，于是曲线可以「冲过头再回弹」，做出 overshoot / 弹性的效果——这正是 ease 系预设做不到、而很多精致微交互（按钮按下回弹、卡片弹入）依赖的手感。设计猫的控制点可以拖到面板上下边界之外，曲线随之鼓出或回勾，右侧小球会真实地冲过终点再弹回，让你在复制前就确认手感对不对。需要更夸张的物理弹簧效果时，CSS 的 linear() 多段函数或 JS 动画库更合适，但日常 UI 过渡，一条调好的 cubic-bezier 足够。
落地时记住几条：一是时长与曲线要配合，慢启动慢停下的曲线配 200–400ms 最舒服，太短会看不出节奏、太长会显拖沓；二是同一界面里的同类动效尽量复用同一条曲线（存成 CSS 变量 --ease），保持节奏一致才显专业；三是进入和退出可以用不同曲线——元素进场常用 ease-out（快进慢停、显得轻快），退场常用 ease-in（慢起快走、干脆利落）。设计猫输出标准 cubic-bezier() 值，复制即可填进 transition 或 animation 的 timing-function，全程浏览器本地、不上传、不注册。
如何使用 缓动曲线编辑器？
- 1在曲线面板上拖动两个圆形控制点，塑造你想要的加减速节奏。
- 2或点下方的预设（ease、ease-in-out、回弹 back 等）作为起点再微调。
- 3看右侧小球按这条曲线来回运动，感受真实的动画手感。
- 4点「复制」拿到 cubic-bezier(...) 值，填进 transition 或 animation 的 timing-function。
为什么用设计猫缓动曲线编辑器？
- 拖点即所得：直接在曲线上拖控制点，比盲改四个数字直观得多。
- 动画实时预演：小球同步按曲线运动，缓动手感一眼可感，不用反复刷新。
- 本地运算、复制即用：纯浏览器算曲线，输出标准 cubic-bezier() 值，粘进 CSS 就生效。
常见问题
cubic-bezier 的四个数字分别是什么？
它们是两个控制点的坐标 (x1, y1, x2, y2)：横轴是时间、纵轴是动画进度。x 必须在 0–1 之间，y 可以超出 0–1 以做出回弹效果。设计猫让你直接拖点，自动算出这四个值。
怎么做出「回弹 / 冲过头」的效果？
把控制点拖到面板的上边界之上或下边界之下，让曲线超过 0–1 的进度范围，动画就会先冲过终点再弹回。右侧小球会实时演示这个回弹手感。
复制出来的值怎么用？
把 cubic-bezier(...) 整段填进 transition 或 animation 的 timing-function，例如 transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); 即可。
和直接写 ease / ease-in-out 有什么区别？
ease 这类关键字其实就是预设好的几条 cubic-bezier 曲线，方便但不可调。当默认手感不对——想更跟手、想加回弹、想让进退场节奏不同——就需要自定义曲线。设计猫让你从预设起步、拖点微调，肉眼确认手感后再复制，比盲猜数字快得多。
更新于 · 设计猫团队