steps()需配合@keyframes属性变化才能实现跳跃动画；8帧雪碧图用steps(7)，5字逐显用steps(4)；background-position最稳，transform/opacity易偏移；关键在厘清起始值、目标值、帧数、跳跃次数四者关系。
直接用 animation-timing-function: steps() 无法实现“跳跃动画”，它只控制动画如何分段跳变，本身不产生位移或状态变化——必须配合 @keyframes 中的属性变化（如 background-position、transform、opacity）才能看到逐帧效果。
steps() 的参数怎么填才不跳错帧
常见错误是把帧数直接当 steps(n) 的 n 值。实际逻辑是：从起始状态到最终状态之间，需要 n 次跳跃，对应 n+1 个可见帧。例如 8 帧雪碧图，steps(7) 才对；5 个文字逐字显示，steps(4) 才能完整播完。
-
steps(7, end)（默认）：第 0 帧停留 1/7 时间，第 1 次跳在 1/7 末，最后一次跳在 7/7 末，停在第 7 帧（即第 8 帧左边缘） -
steps(7, start)：第 0 帧不显示，第 1 次跳在 0 时刻，立刻显示第 1 帧，最后停在第 7 帧 -
steps(0)或steps(-1)无效，会被浏览器忽略；steps(3.5)会截断为steps(3)
用 background-position 做雪碧图动画最稳
这是 steps() 兼容性最好、行为最可预测的用法。前提是雪碧图横向等宽排列，且容器尺寸固定。
- 若单帧宽 100px，共 6 帧，总图宽 600px，则
background-position应从0变到-500px（不是 -600px），因为第 6 帧左边缘在 -500px 处 -
animation必须显式声明作用属性，例如animation: walk 1s steps(5) infinite，不能只写steps(5) - 务必设
background-size: 600px auto（或具体宽度），避免缩放导致帧错位 - IE10+、Chrome 23+、Firefox 16+ 均支持，无需前缀
用 transform 或 opacity 做逐帧容易偏移
比如用 transform: translateX() 切换 4 张卡片，想每次滑 100%，目标值应是 translateX(-300%)（滑过前 3 张），配 steps(3)。填 steps(4) 就会多跳一次，最后一帧超出可视区。
- 关键公式：
steps(n)+to { property: value_n }→ 起始为value_0，共n+1个离散状态 - 用
opacity做逐字显示时，需搭配width或clip-path控制可见区域，否则文字会整体闪现 - Safari 对
transform+steps()在高 DPR 屏或缩放下偶有半帧渲染，建议优先用background-position
真正难的不是写 steps(n)，而是算清「起始值、目标值、帧数、跳跃次数」四者关系——少算一帧，动画就卡在倒数第二步不动；多写一步，结尾就多闪一下。动手前先在纸上列清楚：第 0 帧在哪、第 n 帧在哪、中间要跳几次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
