使 CSS 精灵动画工作答案

【问题标题】：Make CSS sprite animation work使 CSS 精灵动画工作
【发布时间】：2016-06-29 22:33:15
【问题描述】：

我是css动画的新手，所以我在网上得到了这个序列动作图片，想让它走路。我按照教程进行操作，但在这种情况下不起作用。我正在努力让它动起来。我不知道如何正确地做到这一点，所以我从第一行图像开始。它的尺寸是 832x228。

这是 CSS 代码：

.sprite {
  width: 130px;
  height: 130px;
  display: block;
  background: transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
  animation: walker 1s steps(8) infinite;
}
@keyframes walker {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 832px 0px;
  }
}

&lt;div class="sprite"&gt;&lt;/div&gt;

【问题讨论】：

标签： css animation sprite css-animations

【解决方案1】：

您在正确的道路上，但 background-position 在关键帧中是错误的。 Sprite 图像应从右向左移动以产生移动动画，因此背景位置应从0 0 变为-832px 0。

.sprite {
  width: 114px;
  height: 114px;
  display: block;
  background: transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
  animation: walker 1s steps(8) infinite;
  /* image size is 832x228, so height is set as half of it */
}
@keyframes walker {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -832px 0px;
  }
}

&lt;div class='sprite'&gt;&lt;/div&gt;

正如 Robert C 的回答中提到的，这仍然不会显示第二行图像。这是因为background-position 的 Y 部分在关键帧内没有变化。下面由 Mishko Vladimir 提供的 sn-p 是让它们显示的一种方法，但问题是如果没有。步数增加到 16（以便显示所有精灵）然后动画不再正常工作。

此外，在 Y 位置发生变化的点处会闪烁。 因此，我的建议是将所有 16 个精灵放在同一行而不是两个。

.sprite {
  width: 114px;
  height: 114px;
  display: block;
  background: transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
  animation: walker 1s steps(8) infinite;
  /*832x228*/
}
@keyframes walker {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -832px 0px;
  }
  51% {
    background-position: 0 -114px;
  }
  100% {
    background-position: -832px -114px;
  }
}

&lt;div class='sprite'&gt;&lt;/div&gt;

【讨论】：

不客气@pexichdu。就像罗伯特在他的回答中提到的那样，如果您希望底行图像也出现在动画中，那将很难。最好把它们放在同一行。
@MishkoVladimir：我将接受您的更改，因为您进行了一些非常有效的编辑。但是，我将删除第二行的循环部分，因为它不能按预期工作。例如，只有 8 个步骤，所以我们不会看到所有 16 个精灵。接下来，我们将看到图像从顶行的最后一个精灵到底行的第一个精灵的闪烁。请不要误会。感谢您的贡献。

【解决方案2】：

您的background-position 好像写错了，应该是-832px 而不是832px。请注意，对于上面的图像，您也只能获得前 8 帧，您需要编辑文件以获得后 8 帧以获得更长的过渡。

您可能还想将animation 中的时间调整为一小部分（我在 0.9 时走得更顺畅），并且您需要将width 和 height 缩小到 @987654327 左右@ 以避免看到其他帧。

【讨论】：