用@keyframes替代GIF的核心是steps(N,start)配合雪碧图background-position：将GIF逐帧转为等距雪碧图，用steps(8,start)实现每帧严格0.1s硬切，避免插值滑动；百分比写法易因精度失准，steps()由引擎原生保障节奏稳定，终点background-position=-(N-1)×单帧宽。
用 @keyframes 替代 GIF 的核心思路
CSS 帧动画不能直接“导入” GIF，但能用逐帧关键帧模拟相同视觉效果——本质是把 GIF 的每一帧拆成独立背景图或雪碧图（sprite）位置，再用 @keyframes 控制切换时机。关键不是“动起来”，而是“卡住每一帧不插值”。
常见错误：直接写 from { opacity: 0; } to { opacity: 1; } 这类过渡动画，结果人物“滑动”而不是“一跳一跳地走”。必须用 step-start 或精确的百分比断点。
- 用
steps(N, start)是最稳的方式，N = 总帧数，start表示在每段动画开始时立刻切到下一帧 - 如果用百分比写法（比如 0%, 20%, 40%...），务必确保每帧停留时间严格相等，且关键帧之间不要写中间状态
- 背景图切换推荐用雪碧图 +
background-position，比换多张background-image更省 HTTP 请求、更可控
steps() 为什么比百分比写法更可靠
百分比写法看着直观，但实际容易因小数精度、浏览器渲染节奏差异导致某帧多卡一帧或少卡一帧；steps() 是 CSS 动画引擎原生支持的“硬切”模式，不依赖时间轴插值，只要总时长和帧数对得上，节奏就稳。
假设你有 8 帧行走图，总动画时长设为 0.8s：
立即学习“前端免费学习笔记（深入）”；
animation: walk 0.8s steps(8, start) infinite;
这就保证了每帧严格显示 0.1s，且切换发生在每 0.1s 的开头（start），不会出现“最后一帧拖尾”或“第一帧闪一下”的问题。
- 别用
steps(8, end)—— 它会让第一帧空白 0.1s，行走动作延迟启动 - 别把总时长写成
1s再配steps(8)—— 默认是end，行为同上 - Chrome 和 Safari 对
steps()支持很好；Firefox 旧版本曾有微小偏差，但 2022 年后已基本一致
雪碧图 + background-position 的实操要点
单图加载快、缓存友好，也方便用 CSS 精确控制每帧位置。前提是你的行走图是等宽等高排列的横向雪碧图（比如 8 帧 × 每帧 64px 宽 → 总宽 512px）。
假设容器尺寸是 64px × 64px，雪碧图路径为 ./walk-sprite.png：
@keyframes walk {
0% { background-position: 0 0; }
12.5% { background-position: -64px 0; }
25% { background-position: -128px 0; }
/* …依此类推直到 100% = -448px 0 */
}但更推荐用 steps() 配合单条声明，避免手算错位：
.walker {
width: 64px;
height: 64px;
background: url('./walk-sprite.png');
background-size: auto;
animation: walk 0.8s steps(8, start) infinite;
}
@keyframes walk {
to { background-position: -448px 0; }
}-
background-position的终点值 = -(总帧数 - 1) × 单帧宽度，这里是-(8-1)*64 = -448px - 不用写满 8 个关键帧，
from和to足够，steps(8, start)会自动均分 - 如果雪碧图是纵向排列，改用
background-position: 0 -448px，Y 轴向下为正
兼容性与性能容易被忽略的细节
这个方案在现代浏览器里跑得很轻，但有两个隐形坑常被跳过：
-
will-change: transform对background-position动画无效，别加——它只对transform和opacity触发硬件加速；想提性能，老老实实用transform: translateZ(0)包一层容器，再让子元素做背景切换 - IE 完全不支持
steps()（包括 IE11），如果还要兼容，得回退到 JS 控制 class 切换，或直接上 GIF；但今天多数项目已可放弃 IE - 移动端 Safari 有时会对快速
steps()动画做节能降帧（尤其锁屏后唤醒），加animation-play-state: running强制保持活跃态可缓解
真正麻烦的从来不是怎么写出来，而是雪碧图有没有对齐像素、单帧宽度是否被小数除尽、以及设计师给的帧数是不是真能被整除——这些地方一错，走起来就像瘸了一样。
