CSS Spritesheet动画一直向左移动

Question

我有一个spritesheet（9170px x 350px），有70个单个字符的帧。这是我的代码。

@-webkit-keyframes play {
  100% {
    background-position: -9170px;
  }
}
@keyframes play {
  100% {
    background-position: -9170px;
  }
}
.character-one {
  width: 131px;
  height: 350px;
  border: 1px solid #ddd;
  margin-left: 20px;
  background: url('http://i.imgur.com/gK3C2VZ.png') left center;
  -webkit-animation: play 2s steps(70) infinite;
  animation: play 2s steps(70) infinite;
}

<div class="character-one"></div>

当我在浏览器中打开它时，我看到角色变得动画了，但是spritesheet在div里面从右向左移动。原因是什么？我认为通常在steps()少于帧数时发生，但在我的情况下，一切似乎都没问题。可能是框架间距不均匀吗？

以下是JSFiddle

的链接

Answer 1

虽然你的实际精灵表是9170px宽，但它内部的各个精灵实际上都有一个余量。这就是导致滑动效果的原因。

根据您的代码，有70个步骤，背景移动9170px（每步为131px）。但每个131px的精灵似乎并没有完全重叠。在下图中，我们可以看到spritesheet的第一个131px和最后一个131px的外观（背景是为了视觉区分而添加的）。

更改下面代码段中的Activity似乎会产生更好的输出。

background-position

@-webkit-keyframes play {
  100% {
    background-position: -9144px;
  }
}

@keyframes play {
  100% {
    background-position: -9144px;
  }
}

.character-one {
  width: 131px;
  height: 350px;
  border: 1px solid #ddd;
  margin-left: 20px;
  background: url('http://i.imgur.com/gK3C2VZ.png');
  background-position: -28px center;
  -webkit-animation: play 2s steps(70) infinite;
  animation: play 2s steps(70) infinite;
}

在下面的精灵表中，我们可以看到每个精灵图像的所有边都有相等的间距。它来自Tree House blog on CSS Sprite Sheet Animations。

Answer 2

精灵图像切片错误，所有图像的距离都不同。请更新精灵图像然后解决问题。