如何制作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 如果是竖排）。