Question

我正在尝试使用CSS3步骤动画使用简单的2图像精灵表从一个图像更改为另一个图像。我似乎无法加载第二个图像来代替第一个图像。我看了其他例子，我真的看不出我错在哪里。所以，如果有人能提供帮助，我将不胜感激。感谢。

<div class="character">
  <div class="beak"></div>
</div>

@keyframes newquestion-beak {
   from { background-position:    0px 0; }
     to { background-position: -100px 0; }
}

.character > div {
  background-repeat: no-repeat;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

.character .beak {
  background-image: url(http://s22.postimg.org/6mb37v5sh/compiled_beaks.png);
  animation: newquestion-beak .8s steps(2) infinite;
}

Answer 1

你的背景定位不对。尝试：

@keyframes newquestion-beak {
   from { background-position: -100px 0; }
     to { background-position:  100px 0; }
}

Running demo on CodePen

Answer 2

在动画中使用“steps（2）”似乎只是将图像移动到一半。使用Chrome浏览器，加倍'到'背景位置对我有用。

Demo with change.

CSS3步骤动画 - 不改变图像，只移动图像

2 个答案: