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