CSS cubic-bezier() 函数（保姆级教程）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：为何需要学习 CSS cubic-bezier() 函数？

在网页开发中，动画效果是提升用户体验的核心要素之一。无论是按钮点击的反馈、页面过渡的流畅感，还是组件的动态交互，合适的动画曲线都能让设计显得更自然、更符合用户直觉。而 CSS cubic-bezier() 函数 正是控制动画速度曲线的核心工具，它允许开发者通过数学表达式精确调整动画的节奏。

对于编程初学者来说，理解 cubic-bezier() 的数学原理可能有一定挑战，但通过本文的循序渐进讲解，你将掌握如何通过直观的曲线参数设计出符合需求的动画效果。中级开发者则可以通过案例分析，学习如何在复杂场景中优化曲线参数，实现更细腻的视觉表现。

二级标题：cubic-bezier() 函数的基本语法与参数含义

基础语法结构

CSS 的 cubic-bezier() 函数采用贝塞尔曲线（Bézier curve）的数学模型，其语法格式如下：

animation-timing-function: cubic-bezier(x1, y1, x2, y2);

其中，x1, y1, x2, y2 是四个控制点的坐标值，取值范围均为 0 到 1。这四个参数共同决定了动画在时间轴上的速度变化。

参数的直观理解

想象你正在驾驶一辆赛车，动画的开始点是起点线，结束点是终点线。x1, y1 和 x2, y2 就像赛道上的两个控制塔，它们决定了赛车在赛道上的加速和减速轨迹：

• x1 和 x2：表示时间轴上的位置（从 0 到 1 的比例）。
• y1 和 y2：表示速度在对应时间点的值（0 表示静止，1 表示最大速度）。

例如，参数 cubic-bezier(0.25, 0.1, 0.25, 1.0) 的含义是：

• 在时间的 25% 处（x1=0.25），速度达到 10%（y1=0.1）；
• 在时间的 25% 处（x2=0.25），速度达到 100%（y2=1.0）。

二级标题：贝塞尔曲线原理与常见曲线类型

贝塞尔曲线的数学基础

贝塞尔曲线通过控制点的坐标计算出平滑的曲线路径。在动画中，这条曲线的 Y 轴代表动画的完成度（0% 到 100%），X 轴代表时间流逝（0% 到 100%）。例如：

• 当曲线在某个时间点（X）的 Y 值较高时，动画在此刻的移动速度更快；
• 当 Y 值较低时，动画的移动速度更慢。

常见预设曲线及其应用场景

CSS 提供了四个预设的动画曲线，它们均可以通过 cubic-bezier() 表达式复现：

二级标题：从零开始设计动画曲线

第一步：明确动画需求

设计曲线前需明确动画的视觉目标。例如：

• 模拟物理抛物线（如弹跳效果）需要先加速后减速；
• 突出按钮的点击反馈，可能需要快速开始并缓慢停止。

第二步：使用在线工具辅助设计

推荐使用 cubic-bezier.com 或 easings.net 等工具，通过拖动控制点实时预览曲线效果。例如：

1. 在 cubic-bezier.com 中，将两个控制点分别拖到 (0.4, 0.2) 和 (0.7, 0.9)，可得到类似 ease-in-out 的曲线；
2. 将第二个控制点的 Y 值设为超过 1（如 1.2），可制造“超速”效果，使动画在某个阶段短暂反向移动。

第三步：编写代码并调试

将设计好的参数代入 CSS 代码，例如：

.example {
  animation: slide 2s cubic-bezier(0.4, 0.2, 0.7, 0.9);
}

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}

二级标题：实战案例：按钮点击反馈动画

需求分析

设计一个按钮，当鼠标悬停时，按钮需：

1. 缓慢放大（0.3秒）；
2. 离开时快速恢复原状（0.15秒）。

参数选择

• 悬停动画（放大）：希望有弹性效果，选择 cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 ease-out）；
• 恢复动画（缩小）：希望快速完成，选择 cubic-bezier(0.4, 0, 1, 1)（即 ease-in）。

完整代码

.button {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.3s;
}

.button:hover {
  transform: scale(1.1);
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

二级标题：进阶技巧：与关键帧动画的结合使用

场景：复杂页面切换动画

假设需要实现一个页面从右滑入、停留 1 秒、然后从左滑出的效果，且每个阶段需不同速度曲线：

@keyframes pageTransition {
  0% {
    transform: translateX(100%);
    animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67); /* 缓慢进入 */
  }
  25% {
    transform: translateX(0%);
  }
  75% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* 猛烈退出 */
  }
}

关键点解析

• 在 0% 到 25% 阶段，使用 cubic-bezier(0.17, 0.67, 0.83, 0.67) 让页面缓慢滑入；
• 在 75% 到 100% 阶段，使用 cubic-bezier(0.22, 1, 0.36, 1) 使页面快速消失。

二级标题：性能与优化注意事项

避免过度复杂的曲线参数

虽然 cubic-bezier() 提供了自由度，但过于复杂的参数（如多个控制点的微调）可能导致浏览器计算负担增加。建议：

• 对于简单动画，优先使用预设值；
• 对于复杂动画，先通过工具生成参数，再逐步微调。

浏览器兼容性

所有现代浏览器均支持 cubic-bezier()，但在旧版 IE 中需使用 -ms- 前缀。可通过 Can I use 查看具体支持情况。

动态生成参数的技巧

在 JavaScript 中可通过计算动态生成曲线参数，例如：

function generateEaseInOut(x) {
  const t = (x * Math.PI)/2;
  return (Math.sin(t) + 1) / 2;
}

结论：掌握 CSS cubic-bezier() 的核心价值

通过本文的学习，你已掌握了 CSS cubic-bezier() 函数 的核心概念、参数设计方法及实战技巧。无论是为按钮添加细腻的反馈，还是为页面设计流畅的过渡效果，这一工具都能帮助你实现更自然、更符合用户直觉的交互体验。

记住，动画曲线的设计本质是“讲故事的艺术”——通过速度变化引导用户的注意力，让每个动作都有其合理性和情感表达。建议读者通过以下步骤深化理解：

1. 使用在线工具反复练习参数调整；
2. 尝试将预设值替换为自定义的 cubic-bezier 参数；
3. 在真实项目中对比不同曲线的视觉效果差异。

通过持续实践，你将逐渐培养出对曲线参数的“直觉”，最终成为能用代码“绘制”出优雅动画的开发者。