CSSスプライトシートのアニメーションが動作しない（左右にスクロールする）

Question

CSSアニメーションを使用して文字をアニメーション化しました。私は1つのアニメーションを正常に完了しましたが、他のアニメーションを試してみると、私は奇妙な影響を受けます。 Texture Packerを使用してスプライトシートを作成しています。 1行上のスプライトを維持

• ：

  

  は、私の研究を通して、私は別のアプローチを試みました。私は様々なスプライトシートを試しました、 いくつかの行と複数のスプライト移動を含むもの は4 x8です。

• 1つのスプライトシート上の複数の文字の移動（アイドル、実行、ウォーク、
  など）。
• 1文字の移動スプライトシートのみを保持する（アイドル状態のみ）。

これは私が試したことのないいくつかのものです。 CSSでスプライトシートがどのように機能するのか、私が簡単な間違いをしているのか、基本的に理解できないのかどうかはわかりません。誰でも自分のアニメーションをどのように動かすかについて考えていますか？

は、ここに私のコードです：

HTML：

<span class="jellyYellow0001 sprite"></span> 

CSS：

@keyframes play { 
    100% { background-position: -127px; } /*I've played with this value*/ 
} 


.sprite { 

    display:inline-block; 
    overflow:hidden; 
    background-repeat: no-repeat; 
    background-image:url(jellyYellow.png); 
    width: 130px; 
    height: 110px; 
    animation: play 1s steps(8) infinite; 

} 

.jellyYellow0001 {width:124px; height:108px; background-position: -1px -1px} 
.jellyYellow0002 {width:124px; height:108px; background-position: -127px -1px} 
.jellyYellow0003 {width:124px; height:108px; background-position: -253px -1px} 
.jellyYellow0004 {width:124px; height:108px; background-position: -379px -1px} 
.jellyYellow0005 {width:124px; height:108px; background-position: -505px -1px} 
.jellyYellow0006 {width:124px; height:108px; background-position: -631px -1px} 
.jellyYellow0007 {width:124px; height:108px; background-position: -757px -1px} 
.jellyYellow0008 {width:124px; height:108px; background-position: -883px -1px} 
.jellyYellow0009 {width:124px; height:108px; background-position: -1009px -1px} 
.jellyYellow0010 {width:124px; height:108px; background-position: -1135px -1px} 

はここでスプライトシートの1つのバージョンです。

私が試した別のスプライトシートです。 Uアニメーション反復カウントを追加する必要がスプライトセレクタで

Answer 1

@keyframes play { 
 
    100% { background-position: -127px; } /*I've played with this value*/ 
 
} 
 

 

 
.sprite { 
 
\t display:inline-block; 
 
    overflow:hidden; 
 
    background-repeat: no-repeat; 
 
    background-image:url(https://i.stack.imgur.com/y0Xxv.png); 
 
    width: 130px; 
 
    height: 110px; 
 
    animation: play 1s steps(8) infinite; 
 
\t animation-iteration-count: 1; 
 

 
} 
 

 
.jellyYellow0001 {width:124px; height:108px; background-position: -1px -1px}

<span class="jellyYellow0001 sprite"></span>

：1。