0

CSS3 ステップ アニメーションを使用して、単純な 2 つの画像のスプライト シートを使用して、ある画像から別の画像に変更しようとしています。最初の画像の代わりに 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;
}
4

2 に答える 2

0

アニメーションで「steps(2)」を使用すると、画像が途中までしか動かないようです。Chromeを使用して、「to」の背景位置を2倍にするとうまくいきます。

変更を伴うデモ。

于 2013-10-17T10:10:46.530 に答える