使CSS精灵动画工作

Question

我不熟悉css动画，所以我在网上得到了这个序列运动图片，并想让它行走。我遵循一个教程，但它在这种情况下不起作用。我想让它动起来。我不知道怎么正确地做所以我从第一行图像开始。尺寸为832x228。

，这是CSS代码:

.sprite {
  width: 130px;
  height: 130px;
  display: block;
  background: transparent url(https://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(https://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(https://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左右，以避免看到其他一些帧。