制作 CSS 精灵动画

Question

我是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;
  }
}

<div class="sprite"></div>

Answer 1

您的方向是正确的，但关键帧中的 background-position 是错误的。精灵图像应从右向左移动以产生移动动画，因此背景位置应从 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;
  }
}

<div class='sprite'></div>

如 Robert C 的回答中所述，这仍然不会显示第二行图像。这是因为 background-position 的 Y 部分在关键帧内没有改变。下面由 Mishko Vladimir 友情贡献的代码片段是让它们显示的一种方法，但问题是如果没有。步骤增加到 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;
  }
}

<div class='sprite'></div>

Answer 2

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

您可能还想将 animation 中的时间调整到一小部分（我用 0.9 走得更顺畅），并且您会想要缩小 width 和 height 降低到 115px 左右以避免看到其他一些帧。

制作 CSS 精灵动画

Make CSS sprite animation work

css

animation

sprite

css-animations