CSS cubic-bezier() 函数（详细教程）

什么是 CSS cubic-bezier() 函数

在网页动画设计中，我们常常会遇到“动起来”的效果。比如按钮点击后微微弹起，菜单从左侧滑入，或者页面切换时的缓动过渡。这些看似简单的动画，背后都离不开一个关键的工具：CSS cubic-bezier() 函数。

它不像 transition 或 animation 那样直接控制动画的开始和结束，而是定义动画“如何加速、减速、暂停或反弹”。你可以把它想象成一条“速度曲线”——就像赛车在赛道上从静止加速到最高速，再慢慢减速，这条曲线决定了整个过程的节奏感。

cubic-bezier() 接受四个参数：cubic-bezier(x1, y1, x2, y2)，这四个值都是 0 到 1 之间的浮点数。它们共同定义了一条三次贝塞尔曲线，这条曲线的形状决定了动画的时间函数。

简单来说，如果你把动画时间当作横轴（0 到 1），动画的完成度当作纵轴（0 到 1），那么 cubic-bezier() 就是这条从起点 (0,0) 到终点 (1,1) 的曲线。曲线越陡，动画越快；曲线越平缓，动画越慢。

注意：这个函数必须配合 transition-timing-function 或 animation-timing-function 使用，单独写是无效的。

为什么需要 cubic-bezier() 函数

我们先来看看默认的动画方式。比如使用 ease 关键字：

.button {
  transition: all 0.3s ease;
}

ease 是默认值，它的效果是“先慢后快再慢”，看起来自然，但如果你想要更个性化的动画，比如“先快后慢”、“弹跳”、“先加速后反向弹回”等，ease 就不够用了。

这时候 cubic-bezier() 就派上用场了。它可以让你精确控制动画每一帧的速度变化，从而实现几乎任何想要的运动效果。

举个例子：你想让一个菜单从右侧滑入时，一开始飞快地进来，然后慢慢减速停住，就像“撞墙”一样。这种效果在传统 ease 中很难实现，但用 cubic-bezier(0.7, 0, 0.3, 1) 就能轻松搞定。

cubic-bezier() 的参数解析

cubic-bezier(x1, y1, x2, y2) 这四个参数，代表的是两个控制点的坐标。想象一下，你在画一条从 (0,0) 到 (1,1) 的曲线，但你不能直接画，只能通过两个“锚点”来引导它。

• x1 和 y1：第一个控制点的横纵坐标
• x2 和 y2：第二个控制点的横纵坐标

这两个点决定了曲线的弯曲程度和方向。

重要提示：x1 和 x2 必须在 0 到 1 之间，y1 和 y2 也必须在 0 到 1 之间，否则曲线可能超出正常范围，导致动画行为异常。

下面我们通过几个典型参数组合来理解：

小技巧：你可以把 cubic-bezier() 的参数想象成“控制杆”——调整它们就像在调整动画的“加速度表”。

实战案例 1：滑动菜单动画

我们来实现一个从右侧滑入的侧边菜单，使用 cubic-bezier(0.7, 0, 0.3, 1) 实现“快速进入、缓慢停止”的效果。

.sidebar {
  position: fixed;
  right: -300px; /* 初始隐藏在右侧 */
  top: 0;
  width: 300px;
  height: 100%;
  background-color: #333;
  color: white;
  transition: right 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.sidebar.open {
  right: 0; /* 滑动到屏幕边缘 */
}

<div class="sidebar" id="sidebar">
  <ul>
    <li>首页</li>
    <li>关于</li>
    <li>联系</li>
  </ul>
</div>

<button onclick="document.getElementById('sidebar').classList.toggle('open')">打开菜单</button>

说明：

• right: -300px 表示菜单初始时完全隐藏在屏幕右侧。
• transition: right 0.4s cubic-bezier(0.7, 0, 0.3, 1) 定义了 right 属性变化时的动画速度曲线。
• cubic-bezier(0.7, 0, 0.3, 1) 的效果是：动画开始时非常快，接近终点时逐渐减速，形成“撞墙式”的停顿感，非常符合真实物理滑动的直觉。

实战案例 2：弹跳按钮动画

我们来做一个按钮，点击时会有“弹簧弹跳”效果，这在移动端交互中非常常见。

.bounce-button {
  padding: 12px 24px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-button:hover {
  transform: scale(1.1); /* 悬停放大 */
}

.bounce-button:active {
  transform: scale(0.95); /* 点击时压缩 */
}

说明：

• cubic-bezier(0.68, -0.55, 0.265, 1.55) 是一个典型的“弹跳曲线”。
• y1 = -0.55 和 y2 = 1.55 超出了 0 到 1 的范围，这正是弹跳效果的关键——它让动画“超调”，即超过目标值后再反弹回来。
• 这种曲线模拟了真实弹簧的物理行为，让按钮点击时有“回弹”感，提升交互体验。

常用预设值与自定义对比

CSS 提供了一些预设的 timing-function，比如 ease、linear、ease-in、ease-out、ease-in-out。但它们的曲线是固定的，无法自定义。

而 cubic-bezier() 的优势在于完全自定义。你可以在 https://cubic-bezier.com 这个网站上实时预览曲线，拖动控制点，找到最适合你动画的参数。

比如，你想要一个“先慢后快再反弹”的效果，可以尝试：

cubic-bezier(0.17, 0.67, 0.83, 0.67)

或者“开始快，中间慢，最后快”的效果：

cubic-bezier(0.4, 0, 0.6, 1)

这些曲线没有“标准答案”，只有“合适”与“不合适”。

如何调试 cubic-bezier() 曲线

在实际开发中，你可能会发现曲线调得不太对。以下是几个调试建议：

1. 不要盲目试值：每个参数都影响曲线形态，建议用工具辅助。
2. 先看曲线，再看效果：打开 cubic-bezier.com ，输入参数，观察曲线形状。
3. 注意 y 值超范围：y1 或 y2 小于 0 或大于 1 时，会产生“超调”效果（如弹跳）。
4. 测试动画时用长一点的时间：比如 0.5s，方便观察细节变化。
5. 避免过度复杂：曲线太复杂可能让动画显得不自然，建议保持简洁。

总结与建议

CSS cubic-bezier() 函数 是实现高级动画的核心工具之一。它让你摆脱“默认动画”的束缚，真正掌握动画的节奏与情绪。

• 它不是魔法，而是一种数学表达——用四个点定义一条速度曲线。
• 它适用于所有支持 transition 和 animation 的属性，如 transform、opacity、left、width 等。
• 推荐新手从 cubic-bezier(0.42, 0, 0.58, 1) 开始，这是 ease-in-out 的标准曲线。
• 对于进阶用户，建议收藏 cubic-bezier.com 作为调参工具。

最后提醒一句：动画不是越多越好，而是越“自然”越好。一个恰到好处的 cubic-bezier() 曲线，能让你的页面瞬间“活”起来。

掌握它，你就不再只是写代码，而是在设计体验。