用 CSS steps() 实现帧动画需设 steps(7, end) 控制 8 帧雪碧图的背景位移，background-position 从 0 到 -700px，配合 background-size 和固定容器尺寸，避免错帧、卡顿。
用 CSS 的 steps() 实现帧动画和逐帧漫画效果，核心是让动画“不平滑”，而是按固定间隔一帧一帧地跳变。它不是靠连续过渡，而是靠精确控制背景位置或位移的停顿点来模拟老式胶片或像素游戏的机械感。
关键参数怎么填：n 是步数，不是帧数
如果一张横向雪碧图有 8 帧，每帧宽 100px，总宽 800px，那么 background-position 需从 0 变到 -700px（只移动 7 个间隔）。对应写 steps(7, end)——因为从第 0 帧跳到第 7 帧，共 7 次跳跃，才能完整播完 8 帧。写成 steps(8) 会导致最后一帧来不及显示或空白一帧。
-
steps(7)等价于steps(7, end)：第 1 帧在 0% 瞬间出现，之后每 1/7 动画时长跳一次，第 8 帧停在最后 1/7 时间段 -
steps(7, start)：0% 时刻立刻跳到第 2 帧，第 1 帧几乎不可见，适合打字机类效果，但不适合常规帧动画 - 数值必须是正整数；
steps(7.5)或steps(-1)会被浏览器忽略，退回到默认缓动
background-position 是最稳的实现方式
比 transform 更可靠，不触发重排，硬件加速成熟，兼容性好（IE10+、Chrome 23+、Firefox 16+ 全支持）。前提是雪碧图严格等距排列，且容器尺寸与单帧一致。
- 容器设固定宽高，例如
width: 100px; height: 100px; - 必须声明
background-size: 800px 100px;（不能省略），否则缩放会破坏像素对齐 - @keyframes 中写
0% { background-position: 0 0; } 100% { background-position: -700px 0; } - 动画属性写成
animation: play 0.7s steps(7, end) infinite;（总时长 = 帧数 × 单帧时长，如 8 帧 @ 100ms/帧 = 0.8s）
逐帧漫画效果的特殊处理
漫画分镜常需强调“定格感”和节奏停顿，比如一页一停、气泡弹出、文字逐行浮现。这时可组合使用：
- 多段
@keyframes分别控制不同元素，每段用独立steps(1, end)实现“闪现即停” - 配合
animation-delay错开各帧触发时间，模拟手翻书节奏 - 用
opacity+steps(1)控制对话框淡入，避免渐变干扰漫画风格 - 加
will-change: background-position提升滚动中帧切换的渲染稳定性
容易卡顿或错位的几个硬坑
多数“不动”“跳帧”“首帧消失”问题都出在计算和绑定环节：
- 只写了
steps(7)却没在animation属性里指定对应动画名，或 @keyframes 里改的是transform而不是background-position - 雪碧图路径错误、404，或被父容器
overflow: hidden截断导致部分帧不可见 - 动画时长太短（如
0.05s）或帧数太多（如steps(30)），超出人眼分辨能力，看起来像没动 - 未设
background-size，浏览器按默认方式拉伸背景，使background-position计算偏移失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
