css动画如何控制速度变化_css动画速度曲线设置方法

animation-timing-function通过速度曲线控制css动画节奏，不改变总时长；支持ease、linear、ease-in/out、steps()及cubic-bezier()自定义，需符合[0,1]参数范围，且transition与animation共用该属性。

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) 这类“过冲型”曲线反而更自然。