精灵图动画的核心是css的steps()函数，它将animation分割为离散帧，避免平滑过渡；需精确计算background-position位移、适配排列方向、处理hover持续播放、优化性能与导出设置。
精灵图动画不是靠 JS 帧循环，核心就一条：用 steps() 拦住 CSS animation 的平滑过渡，让它一帧一帧“跳”。
为什么 animation + steps() 才是正解
直接用 transition 或默认的 ease 动画会让背景图连续滑动，根本看不出单帧；而 steps(n) 强制把整个动画过程切成 n 个等长“台阶”，每阶停住显示一帧，这才是逐帧动画的本质。
-
steps(8)表示整段动画分 8 步执行，对应精灵图里 8 张水平排列的帧 - 第二参数省略时默认为
end，即“在每步结束时才切换位置”，避免闪跳 - 若帧是垂直排列，就得用
background-position-y配合负值位移，不能只改x - IE10+ 支持，但旧版 Safari 需加
-webkit-animation前缀
background-position 计算必须对齐帧尺寸
位移量不是随便写的。假设每帧宽 120px、高 100px，共 6 帧横排——那总宽度就是 720px，最后一帧的 background-position 就得是 -720px 0（或 0 -600px 如果是竖排）。
- 写错位移值会导致某帧被截断、重复显示或直接跳过
- 推荐用
calc()动态计算：比如background-position: calc(-120px * 5) 0表示第 6 帧（索引从 0 开始） - 如果精灵图边缘有留白，实际位移要减去留白像素，否则会露底色
-
background-size设为auto或具体值，别用100%拉伸，会模糊帧边界
hover 触发和无限循环的坑
很多人写 .box:hover { animation: run 0.4s steps(6) infinite; }，结果鼠标一移开动画就停了——因为 infinite 只在 hover 状态下生效，移出即重置。
- 想 hover 启动后持续播，得拆成两个动画：
animation: play 0.4s steps(6) forwards, loop 0.4s steps(6) infinite -
forwards保证第一遍播完停在最后一帧，再由loop接续 - 若只想播一遍，去掉
infinite，但记得加forwards，否则动画结束后会弹回初始帧 - 移动端没有 hover，得用
:active或 JS 切换 class 控制
性能与兼容性真实约束
大图精灵（比如 3000×200px）在低端 Android 上容易卡顿或内存溢出，不是所有设备都扛得住。
- 单行帧数别超 20，否则
steps(30)在低帧率设备上会掉帧 - 优先用 WebP 格式精灵图，比 PNG 小 40% 以上，加载更快
- 真要兼容 IE9 及更老版本？放弃
animation，改用 JS +setTimeout切换background-position - 动画元素建议加
will-change: transform或用transform: translateZ(0)触发硬件加速
最易忽略的一点：精灵图导出时必须关闭“半透明抗锯齿”或“平滑缩放”，否则帧之间会出现 1px 模糊交界，steps() 一跳，边缘就发虚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
