灵敏的按钮反馈
悬停时使用标准缓动
.btn { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover { transform: translateY(-2px);}大部分上浮在一开始就快速完成，然后慢慢稳住，感觉紧跟鼠标，而不是拖泥带水。
Cubic-Bezier 缓动曲线生成器
绘制自定义 CSS 缓动曲线，并实时预览动画。
最后更新
准备好真正学会编程了吗？
Coddy 让你在浏览器里编写真实代码来学习：互动课程、即时反馈，卡住时还有 AI 帮忙。
Cubic-Bezier 缓动曲线生成器是什么？
CSS 中的缓动函数（easing function）控制动画在持续时间内如何加速和减速。关键字 ease、ease-in、ease-out 和 ease-in-out 是四条特定曲线的简写。如果这四种不够用，CSS 还提供了 cubic-bezier()：一个接收四个数字、绘制自定义曲线的函数。
这四个数字是两个控制点的坐标（x1, y1, x2, y2）。手写它们很别扭，因为微小的改动就会带来明显的视觉差异，稍微超出范围就会产生“回弹”效果，而光看数字根本看不出来。用可视化编辑器拖动控制柄、观察曲线的反应，比反复调小数快得多。
Coddy 的编辑器会实时绘制曲线，用你的缓动让预览小球动起来，并提供常用的预设：CSS 关键字、Material Design 的标准曲线、回弹缓出（bouncy out），以及先预备再冲过头的效果。复制生成的 cubic-bezier() 代码，粘贴到你的 CSS 中即可，全部在浏览器中运行。
关于 cubic-bezier 缓动你需要知道的
- 这条曲线描绘的是“进度”随“时间”的变化。时间从左到右（0 → 1），进度从下到上（0 → 1）。一条笔直的对角线就是
linear：每单位时间的进度都相同。 - 两个控制点的 X 坐标被限制在 0..1 之间。Y 坐标可以小于 0 或大于 1，回弹、预备和冲过头的缓动正是这样做出来的（动画会短暂越过终点，或一开始朝相反方向运动）。
- 缓出（ease-out）曲线的大部分进度发生在前段，感觉灵敏利落，适合入场和按钮反馈。缓入（ease-in）曲线的进度集中在后段，感觉迟缓，通常不适合界面交互，但适合退场。
- Material Design 推荐的标准缓动是
cubic-bezier(0.4, 0, 0.2, 1)：起步快，收尾慢。iOS 用的曲线接近cubic-bezier(0.42, 0, 0.58, 1)（ease-in-out）。 - 对于短动画（≤200ms），大多数缓动看起来差不多，时长比曲线更重要。对于较长的动画（300ms 以上），缓动决定了动作是精致还是粗糙。
如何设计 cubic-bezier 缓动
从预设开始
点选一个接近你想要的感觉的预设。Material standard 和 Bouncy out 是界面动效的好起点，ease-out 是入场动画稳妥的默认选择。
拖动两个控制柄
青色的控制柄就是两个控制点。拖动第一个来调整动画如何“开始”，拖动第二个来调整它如何“结束”。把控制柄拉到上边缘以外，就会产生冲过头的效果。
选择时长并重新播放
为你实际的动画选一个合理的时长。界面过渡通常为 150 至 300ms，强调类动效为 400 至 600ms。点击“重新播放”，按新的时长重新触发预览。
用数字输入框精调
需要精确数值时，在曲线下方的 X1/Y1/X2/Y2 输入框中输入。Y 可以小于 0 或大于 1，X 始终在 0..1 之间。
复制 CSS
点击“复制”获取完整的
transition规则。把它放进你的样式表，再把transform换成你要做动画的属性。
Cubic-bezier 速查表
常用缓动及其对应的 cubic-bezier 数值。下面四个关键字都是特定 cubic-bezier 曲线的别名。
| 缓动 | cubic-bezier 数值 | 适用场景 |
|---|---|---|
ease | (0.25, 0.1, 0.25, 1) | transition 的默认值，柔和但普通 |
linear | (0, 0, 1, 1) | 匀速，通常不适合界面交互，但适合加载转圈 |
ease-in | (0.42, 0, 1, 1) | 慢起快收，最适合退场 |
ease-out | (0, 0, 0.58, 1) | 快起慢收，最适合入场和交互反馈 |
ease-in-out | (0.42, 0, 0.58, 1) | 前后对称，最适合来回切换 |
| Material standard | (0.4, 0, 0.2, 1) | 利落的现代界面动效 |
| Bouncy out | (0.18, 0.89, 0.32, 1.28) | 冲过头后回稳，适合活泼的入场 |
可以动手试试的 cubic-bezier 示例
回弹入场
冲过头后回稳
.card { transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}Y2 为 1.28，让曲线越过终点后再回稳。要适度使用：如果所有东西都这样动，回弹效果很快就会让人厌烦。
前进之前先预备
先往回拉，再向前冲
.hero { transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}Y1 为负数，意味着动画会先短暂地朝“相反”方向运动，再前往终点。这借鉴自传统动画：一点点预备动作，会让主要动作显得更有意图。
缓动的常见错误
- 入场动画用
ease-in。它慢起快收，和灵敏的感觉恰好相反。应该改用ease-out。 - 觉得
linear比较中性，就把它用在界面动效上。匀速运动看起来很机械，它适合进度条和加载转圈，但很少适合其他场景。 - 每个过渡都加上夸张的冲过头效果。回弹缓动只是点缀，不是默认选项，到处都用只会显得杂乱。
- 动作感觉慢，却去改缓动而不是改时长。如果 600ms 的 ease-out 感觉拖沓，先试试 300ms。
- 忘了两个控制柄的 X 坐标被限制在 0..1 之间。把控制柄拖出画布左右两侧没有任何作用，只有 Y 可以超出方框。
Cubic-Bezier 常见问题
cubic-bezier() 里的四个数字是什么意思？
它们是两个控制点的 x 和 y 坐标：
cubic-bezier(x1, y1, x2, y2)。第一个点决定动画如何“开始”，第二个点决定它如何“结束”。X 始终在 0 到 1 之间（时间），Y 可以超出 0..1，用来做冲过头或预备效果（进度）。界面动画应该用哪种缓动？
入场（元素出现）和交互反馈（按钮悬停、获得焦点）用 ease-out，或 Material Design 的标准曲线
cubic-bezier(0.4, 0, 0.2, 1)。退场适合用 ease-in。除非是在表现进度，否则不要用 linear。ease 和 ease-out 有什么区别？
两者收尾都很慢，但
ease 起步也比较柔和。ease-out 一开始就全速运动然后减速，正是这种“立即”响应，让它比 ease 感觉更灵敏。怎么用 CSS 做回弹动画？
把第二个控制柄拖到画布顶部以上（Y2 > 1）。例如
cubic-bezier(0.18, 0.89, 0.32, 1.28) 会冲过头约 28%，然后回稳。如果要多次回弹，需要用 @keyframes 或弹簧物理库，cubic-bezier 只能冲过头一次。cubic-bezier 能用在 @keyframes 动画里吗？
可以。把它作为
animation-timing-function 使用，写在 animation 简写属性里或单个关键帧上都行。对于复杂的多段动作，你可以在每对关键帧之间使用不同的缓动。