如何制作HTML页面中的CSS精灵动画逐帧展示效果？

本文共计852个文字，预计阅读时间需要4分钟。

以下是对伪原创内容的简化

原文：

为什么 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() 一跳，边缘就发虚。