CSS动画速度曲线控制技巧

CSS动画的节奏感并非由“快慢数值”决定，而是通过`animation-timing-function`这一核心属性，借助预设（如ease、linear、ease-in/out）或自定义贝塞尔曲线（`cubic-bezier()`）精准调控速度变化过程——它不改变总时长，却深刻影响动画的起承转合、真实感与用户体验；从按钮悬停的弹性反馈到雪碧图的阶梯式帧动画，再到多动画协同时的节奏统一，掌握速度曲线不仅是技术细节，更是让界面“活起来”的关键艺术，而避开常见陷阱（如非法y值、keyframes内误用、兼容性雷区）则是落地可靠的保障。

animation-timing-function 控制动画速度变化

CSS 动画的速度变化不是靠“快慢数值”直接调节，而是通过 animation-timing-function 指定**速度曲线（timing function）**来实现。它决定动画在持续时间内如何分配运动节奏：是匀速、先快后慢、还是中间加速？

这个属性值不改变动画总时长（animation-duration），只改变每一帧的位移比例。

• ease（默认）：等价于 cubic-bezier(0.25, 0.1, 0.25, 1)，缓入缓出
• linear：匀速，cubic-bezier(0, 0, 1, 1)
• ease-in：缓入，cubic-bezier(0.42, 0, 1, 1)
• ease-out：缓出，cubic-bezier(0, 0, 0.58, 1)
• ease-in-out：比 ease 更平滑的缓入缓出
• steps(4, end)：阶梯式动画，常用于雪碧图帧动画

用 cubic-bezier() 自定义速度曲线

浏览器支持的贝塞尔函数必须是两个控制点坐标，格式为 cubic-bezier(x1, y1, x2, y2)，其中所有参数必须在 [0, 1] 范围内。超出会失效并回退到 linear。

常见误操作：把 y 值设为负数或大于 1 来“超速”，这不会让元素动得更快，只会让曲线非法、动画变线性——因为浏览器无法解析。

真正影响“观感速度”的是曲线斜率：越靠近左上角（小 x + 大 y）越早加速；越靠近右下角（大 x + 小 y）越晚减速。

button {
  animation: slide 0.6s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

上面这个值接近 ease-in-out 但更“弹跳”，适合按钮悬停反馈。

transition 和 animation 共享同一套 timing function

transition-timing-function 和 animation-timing-function 接受完全相同的值，包括 steps() 和自定义 cubic-bezier()。区别仅在于作用对象：

• transition 用于状态切换（如 hover、focus），没有关键帧概念
• animation 配合 @keyframes 使用，可分段设置不同阶段的 timing function（用 animation-timing-function 在 keyframe 内无效，需在每个 to 或 from 中用 animation 简写重置）

注意：@keyframes 规则内部不能写 animation-timing-function；它只能写在调用动画的元素选择器里。

性能与兼容性要注意的点

绝大多数 timing function 对性能无明显影响，但有两个例外：

• steps() 在大量元素同时动画时可能触发频繁重绘，尤其配合 background-position 做精灵图动画
• 极复杂的 cubic-bezier()（比如高曲率震荡型）在低端 Android WebView 中可能出现插值抖动，建议用在线工具预览（如 cubic-bezier.com）

IE10+ 支持全部标准值，但不支持 steps(start) 的第二个参数（只认 end）；Safari 旧版本对 cubic-bezier() 的解析容错较低，避免用科学计数法或多余空格。

真正难调的不是曲线形状，而是让多个动画的 timing function 在视觉节奏上一致——比如一个弹入 + 一个淡入，ease-out 和 ease-in 组合容易不协调，这时统一用 cubic-bezier(0.34, 1.56, 0.64, 1) 这类“过冲型”曲线反而更自然。

今天关于《CSS动画速度曲线控制技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！