如何使用CSS steps()函数制作复古的位图帧动画？-css教程-PHP中文网

steps()函数本质是离散跳变而非平滑缓动，将动画等分为指定帧数并瞬间切换，适用于复古位图帧动画；关键参数为帧数和跳变时机（end更常用），配合background-position或transform实现精灵图逐帧播放，需注意像素对齐、overflow隐藏及safari兼容性问题。

如何使用css steps()函数制作复古的位图帧动画？

steps() 函数的本质是“跳变”，不是缓动

steps() 不是让动画平滑过渡，而是把整个动画过程切成等份，每份之间瞬间切换。做复古位图帧动画（比如 8-bit 游戏角色行走）时，你依赖的不是渐变，而是「一帧停住、下一帧突变」的机械感。它和 ease 或 cubic-bezier() 完全不同类——后者插值，前者离散。

关键参数只有两个：steps(4, end) 中的 4 表示切 4 帧，end 表示在每段**结束时**跳到下一帧（更常用）；start 则是在每段**开始时**就跳，容易导致首帧闪一下，多数情况避开。

常见错误现象：steps(4) 写成 steps(4, start) 后第一帧一闪即逝；或把帧图背景设为透明却忘了父容器也透明，导致切换时透出底层内容，误以为动画“错位”。

用 background-position 实现精灵图逐帧播放

这是最轻量、兼容性最好的做法。把所有帧横向/纵向拼成一张大图（sprite），用 background-position 沿单轴移动，配合 steps() 控制停顿点。

假设你有一张横向排列的 6 帧精灵图，每帧宽 32px，总宽 192px：

div.sprite {
  width: 32px;
  height: 32px;
  background-image: url('walk.png');
  background-size: 192px 32px;
  animation: walk 0.6s steps(6, end) infinite;
}

@keyframes walk {
  0% { background-position-x: 0; }
  100% { background-position-x: -192px; }
}

注意点：

background-position-x: -192px 是终点，但因 steps(6, end)，实际只停在 -0px、-32px、-64px…-160px 这 6 个位置，不会真跑到 -192px（那会空白一帧）
务必设 background-size，否则高缩放下帧会模糊或错位
如果帧数多、图大，用 will-change: background-position 可提升部分浏览器渲染帧率

transform + steps() 也能做，但要注意 transform-origin 和像素对齐

用 transform: translateX() 移动一个包含多帧的内层容器，比 background-position 更灵活（比如想加旋转），但也更容易出问题。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

典型结构：

<div class="anim-container">
  <div class="frame-strip"></div>
</div>

对应 CSS：

.anim-container {
  width: 32px; height: 32px;
  overflow: hidden;
}
.frame-strip {
  width: 192px; height: 32px;
  animation: slide 0.6s steps(6, end) infinite;
}
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-192px); }
}

容易踩的坑：