HTML里使用CSS的animation-timing-function steps实现逐帧动画

steps()需配合animation或transition生效，单独使用无效；background-position+steps是雪碧图逐帧动画最稳定方案，因硬件加速成熟、不触发重排；8帧需steps(7)，范围0→-700px；IE10+等主流浏览器均支持。

steps() 不是动画本身，它只是告诉动画“怎么动”——必须配合 animation 或 transition 才能生效。单独写 steps(4)，页面不会有任何变化。

为什么 background-position + steps 是最稳的逐帧方案

雪碧图（sprite sheet）是 steps() 最典型、兼容性最好、行为最可预测的使用场景。浏览器对 background-position 的硬件加速支持成熟，且该属性变更不触发重排，性能开销低。

• 雪碧图必须横向等宽排列，总宽度 = 单帧宽度 × 帧数；例如 8 帧 × 100px = 800px，则 background-position 动画范围是 0 → -700px（不是 -800px）
• steps() 的第一参数不是帧数，而是“跳跃次数”：8 帧需 steps(7)，因为从第 0 帧跳到第 7 帧共 7 次
• 容器必须设固定宽高，background-size 设为原始图宽（如 800px auto），否则缩放会导致帧错位
• IE10+、Chrome 23+、Firefox 16+、Edge 12+ 均原生支持，无需前缀

steps(n, start) 和 steps(n, end) 的实际差异

默认是 steps(n, end)，但很多人卡在“为什么第一帧要等 1/n 时间才出现”。关键看起始状态是否需要立即呈现：

• steps(4, end)（默认）：0% 时显示第 0 帧，25% 时跳到第 1 帧，50% 跳第 2 帧，75% 跳第 3 帧，最后 25% 停在第 4 帧（即终点）
• steps(4, start)：0% 时立刻跳到第 1 帧，25% 跳第 2 帧，50% 跳第 3 帧，75% 跳第 4 帧，100% 停在第 4 帧
• 打字机效果常用 start，让第一个字符立刻出现；雪碧图一般用 end 更符合直觉

常见报错和静默失败原因

写完 steps() 却没动画？大概率不是语法错，而是绑定或计算问题：

立即学习“前端免费学习笔记（深入）”；

• 忘了在 animation 或 transition 中声明对应属性：比如只写了 animation: play 1s steps(7);，但 @keyframes play 里改的是 opacity，而没动 background-position
• steps() 第一个参数不是整数（如 steps(3.5)）：浏览器直接忽略该 timing function，退回到 ease
• 动画时长太短（如 0.1s）或帧数太多（如 steps(30)）：人眼无法分辨跳变，看起来像平滑移动甚至“不动”
• 雪碧图背景图路径错误、尺寸未设、或被父元素 overflow: hidden 截断：检查 computed styles 中 background-position 是否真在变化

真正容易被忽略的点是：steps 的“步”对应的是动画属性值的离散变化点，不是视觉帧数——它不管图里有没有画对，只管你 keyframes 里 from/to 写的两个值之间被切了几刀。数值算错一帧，整段动画就偏移。