CSS 缓动函数用于控制动画或过渡过程中属性值的变化速率。它定义了动画在不同时间点的进度，让动画看起来更自然。例如 ease 会让动画慢启动、快中间、慢结束，模拟现实世界的物理运动。常见的缓动函数包括 linear、ease、ease-in、ease-out、ease-in-out 以及自定义的 cubic-bezier()。

cubic-bezier(x1, y1, x2, y2) 通过4个参数定义一条三次贝塞尔曲线。起点固定为 (0,0)，终点固定为 (1,1)。x₁ 和 x₂ 必须在 [0,1] 范围内，控制时间轴上的拐点位置；y₁ 和 y₂ 可以超出 [0,1]，从而产生弹跳或过冲效果。例如 cubic-bezier(0.68, -0.55, 0.27, 1.55) 会产生一个弹跳效果，因为 y₁ 为负值，y₂ 大于1。

ease（默认）：慢启动、快中间、慢结束，适用于大多数场景。cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in：慢启动、快结束，适合元素离开屏幕的动画。cubic-bezier(0.42, 0, 1, 1)
ease-out：快启动、慢结束，适合元素进入屏幕的动画。cubic-bezier(0, 0, 0.58, 1)
ease-in-out：慢启动、慢结束，中间快，适合循环动画。cubic-bezier(0.42, 0, 0.58, 1)

通过让 cubic-bezier 的 y₁ 或 y₂ 超出 [0,1] 范围即可。例如 cubic-bezier(0.68, -0.55, 0.27, 1.55) 产生弹跳效果——y₁ 为负使曲线低于0（反向运动），y₂ 大于1使曲线超出终点（过冲后回弹）。弹性效果可使用 cubic-bezier(0.25, 0.46, 0.45, 0.94)。虽然 CSS 规范允许 y 值超出 [0,1]，但 x₁ 和 x₂ 必须保持在 [0,1] 内。

两者使用相同的缓动函数语法，但作用场景不同：transition-timing-function 用于 CSS 过渡（transition），在属性值变化时生效；animation-timing-function 用于 CSS 关键帧动画（@keyframes），可作用于整个动画或单个关键帧之间。此外，animation 还支持 steps() 函数用于逐帧动画。

从性能角度看，所有 CSS 缓动函数都由浏览器引擎原生实现，性能差异微乎其微。但在动画属性选择上需要注意：优先使用 transform 和 opacity 进行动画，它们只触发合成（composite）阶段，不会引起重排（reflow）或重绘（repaint），性能最优。避免对 width、height、top、left 等属性使用动画。

进入屏幕（如模态框出现）：使用 ease-out，快速进入后缓慢停稳。
离开屏幕（如抽屉关闭）：使用 ease-in，缓慢启动后快速消失。
持续循环（如加载动画）：使用 ease-in-out，两端平滑过渡。
微交互（如按钮悬停）：使用 ease（默认），自然且响应迅速。
弹窗/通知：可使用弹性曲线增加趣味性，如 cubic-bezier(0.68, -0.55, 0.27, 1.55)。