📈 CSS cubic-bezier 编辑器

拖动两个控制点编辑 cubic-bezier 曲线。可预览动画。

完全免费无需注册浏览器内完成 5 种语言深色模式

🔒 关于隐私

・浏览器内处理
・输入数据绝不会发送到任何服务器
・无存储日志、无历史、无数据库
・无需注册、登录或付款

拖动蓝色和粉色点编辑曲线

预览

预设

CSS

📖 常见的坑

拖动两个控制点即可塑造 cubic-bezier() 曲线，并实时观察运动效果。处理全部在浏览器内完成。曲线描述的是速度的变化方式：图形越陡的区间，元素在该时刻移动得越快。不过，只调整缓动曲线并不会让动效变好——真正决定观感的，至少同等重要的是持续时间。

情形	会发生什么	怎么处理
所有动效都用 ease-in-out	`ease-in-out` 两端都慢，用在元素「出现」的动作上，最初一瞬会像什么都没发生。尤其用于点击响应时，这会让人觉得按了没反应。人们感知到的「慢」并非总时长，而是「按下到出现可见变化」之间的那段间隔。	惯例是出现用减速曲线、消失用加速曲线。`cubic-bezier(0, 0, .2, 1)` 这样的 ease-out 一开始就迅速移动、随后安静停下，观感上更灵敏。反之关闭或消失时用 `cubic-bezier(.4, 0, 1, 1)` 这样的 ease-in，缓缓起步、快速离场更自然。位置发生移动的用 ease-out，只是原地淡出的用 linear 就够了。
曲线调半天却看不出区别	持续时间太短了。低于约 150ms 时，缓动曲线之间的差异基本无法感知，各种曲线看起来都一样；而超过约 500ms 后，动画则开始被感知为等待而非反馈。精心调校的曲线，只在这两者之间的区间才有意义。	UI 的标准区间是 150~300ms。悬停或聚焦的颜色变化用 100~150ms，模态框或抽屉的开合用 200~300ms，页面级的大幅位移约 400ms。原则上移动距离越长，时间也应越长：让横跨整屏的元素只用 150ms，会显得不自然地快。请先定时长，再去调曲线。
想做弹跳，`cubic-bezier` 却做不出	Y 坐标可以超出 0~1，但 X 坐标必须在 0~1 之内。把 Y 设为大于 1，可以做出冲过头再回落的 overshoot（如 `cubic-bezier(.68, -.55, .27, 1.55)`），但「出去、回来、再出去」的多次弹跳无法用单条贝塞尔曲线表达——一条曲线无法折返。	若确实需要多次弹跳，请用 `@keyframes` 逐帧编写，或用 `linear()` 函数以折线近似。但在此之前请先想清楚是否真的需要——在实际产品界面中，弹跳只在「确实想吸引注意的一瞬」（撤销删除、通知到达）才有价值。加在日常频繁操作的元素上，第三次起就成了干扰。

无论选哪条曲线，你所动画的 CSS 属性对性能的影响都要大上一个数量级。transform 与 opacity 由合成层处理，既不触发布局也不触发重绘；而动画 width / height / top / margin 则会每一帧都从布局计算重来。同样是「向右移动 100px」，left: 100px 与 transform: translateX(100px) 的开销天差地别。此外请务必提供 @media (prefers-reduced-motion: reduce)——对有前庭功能障碍的用户而言，大幅动效会实实在在地影响身体状况。

📖 使用方法

1

拖动控制点

拖动两个点以重塑曲线。
2

预览动画

点击播放查看实际缓动。
3

复制 CSS

复制生成的代码片段。

❓ 常见问题

数据会发送到服务器吗？

不会。一切都在您的浏览器中运行。

Y 可以超出 0-1 范围吗？

是。Y 可超出范围实现弹跳。X 必须在 0-1。

可以在哪里使用？

可用于 transition-timing-function 和 animation-timing-function。

🔗 相关工具

🐛 此工具出现问题了吗？

免费、无需注册。仅提供复现步骤也有帮助。报告将直接发送给运营者并用于改进。