html - CSS3 Step Animation - Not changing Image, Just Moving Image

Question

I am trying to use a CSS3 Step Animation to change from one image to another using a simple 2 image sprite sheet. I can't seem to get the second image to load in place of the first image. I have looked at other examples and I really can't see where I am going wrong. So if anyone could help it would be much appreciated. Thanks.

CODEPEN DEMO

<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 将“到”背景位置加倍对我有用。

有变化的演示。