CSS 缓动曲线教程：cubic-bezier 四个参数的含义，ease、ease-in-out 和回弹效果
一句话答案
cubic-bezier(x1, y1, x2, y2) 用两个控制点描述动画速度变化，x 取 0–1，y 超出 0–1 可做回弹。ease-out 为 (0, 0, 0.58, 1)，ease-in-out 为 (0.42, 0, 0.58, 1)。
广告Advertisement
四个参数是什么
缓动曲线的横轴是时间进度（0 到 1），纵轴是动画进度（0 到 1）。曲线起点固定为 (0, 0)、终点固定为 (1, 1)，cubic-bezier(x1, y1, x2, y2) 设置中间两个控制点 P1(x1, y1) 和 P2(x2, y2)：
- 曲线陡的地方动画快，平的地方动画慢；
- x1、x2 必须在 0 到 1 之间；
- y1、y2 可以小于 0 或大于 1，动画会先往回退或冲过终点再回来，形成回弹效果。
用生成器调曲线
- 选预设：打开 CSS 动画曲线生成器，在“预设”里选 ease、ease-in、ease-out、ease-in-out 或回弹，作为起点。
- 微调参数：拖动 x1、y1、x2、y2 滑块，曲线和预览动画实时变化。
- 设置时长：拖动“时长(秒)”观察不同速度下的效果。
- 复制代码：点“复制 CSS”，得到 transition 或 animation 中可用的 cubic-bezier 值。
〰️ CSS 动画曲线生成器
免费在线使用，文件和数据只在你的浏览器本地处理，无需注册。
广告Advertisement
预设对应的数值
| 关键字 | cubic-bezier | 感觉 |
|---|---|---|
| linear | (0, 0, 1, 1) | 匀速，机械 |
| ease（默认） | (0.25, 0.1, 0.25, 1) | 自然，开始稍快 |
| ease-in | (0.42, 0, 1, 1) | 慢慢加速 |
| ease-out | (0, 0, 0.58, 1) | 快速开始，缓慢停下 |
| ease-in-out | (0.42, 0, 0.58, 1) | 两头慢、中间快 |
怎么选
- 元素进入页面（弹窗出现、菜单展开）：用 ease-out，快速响应、平稳停下；
- 元素离开（弹窗关闭）：用 ease-in，开始慢、迅速消失；
- 位置移动：ease-in-out 更自然；
- 按钮反馈、卡片弹出：适度回弹（y 略大于 1）显得活泼，但不要用在频繁出现的元素上；
- 交互动画时长一般在 150–400 毫秒，太长会让人觉得卡顿。
写法示例
transition: transform 0.3s cubic-bezier(0, 0, 0.58, 1); 表示 transform 变化在 0.3 秒内按 ease-out 曲线完成。布局本身的写法见 Flex 和 Grid 布局，渐变和阴影见 CSS 渐变、CSS 阴影。
常见问题
为什么 x 不能超出 0 到 1？
x 是时间轴，时间不能倒流，超出范围的曲线在浏览器中是无效值。
动画看起来卡顿怎么办？
尽量只对 transform 和 opacity 做动画，它们不会触发重新布局，性能最好。
有些用户不喜欢动画怎么办？
可以用 @media (prefers-reduced-motion: reduce) 为设置了“减少动态效果”的用户关闭或简化动画。