すべてのスプライト画像をアニメーション化する方法は？

Question

選択したイメージスプライトに1つのラインイメージが含まれていない場合、すべてのイメージスプライトをアニメーション化するにはどうすればよいですか？

**ここではこの1例では、1本のライン画像**

リンクがあります：Reference

.hi { 
 
    width: 50px; 
 
    height: 72px; 
 
    background-image: url("http://s.cdpn.io/79/sprite-steps.png"); 
 
    
 
    -webkit-animation: play .8s steps(10) infinite; 
 
     -moz-animation: play .8s steps(10) infinite; 
 
     -ms-animation: play .8s steps(10) infinite; 
 
     -o-animation: play .8s steps(10) infinite; 
 
      animation: play .8s steps(10) infinite; 
 
} 
 

 
@-webkit-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -500px; } 
 
} 
 

 
@-moz-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -500px; } 
 
} 
 

 
@-ms-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -500px; } 
 
} 
 

 
@-o-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -500px; } 
 
} 
 

 
@keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -500px; } 
 
}

<img src="http://s.cdpn.io/79/sprite-steps.png" /> 
 
<div class="hi"></div>

今、この例では、1行ではないスプライト画像が含まれています。しかし、3行のスプライト画像が含まれています。上のコードスニペットのリンクのように、これをどのようにアニメーション化しますか？ jquery/javascriptを使用して表示しますか？助けてください。

img {display: block;margin: auto;} 
 

 
.sample { 
 
    margin: 0 auto; 
 
    width: 75px; 
 
    height: 100px; 
 
    background-image: url("https://fermmm.files.wordpress.com/2011/02/preview.jpg"); 
 
      animation: play 1s steps(4) infinite; 
 
} 
 
@keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -299px; } 
 
}

<img src="https://fermmm.files.wordpress.com/2011/02/preview.jpg" /> 
 

 
<div style="text-align:center;">Sprite image</div> 
 
<div class="sample"></div>

Answer 1

2つの別々のキーフレームアニメーションは垂直水平4つのフレーム、3つのフレームを横断するように作成されます。一方の方向のアニメーションが再生されているときは、他方のアニメーションをフリーズする必要があります。

1秒は4水平フレームを通過するように設定されているため、次の垂直フレームは1秒後に開始するため、垂直方向の長さは1秒×3垂直フレームになります。

img { 
 
    display: block; 
 
    margin: auto; 
 
} 
 

 
.sample { 
 
    margin: 0 auto; 
 
    width: 75px; 
 
    height: 100px; 
 
    background-image: url("https://fermmm.files.wordpress.com/2011/02/preview.jpg"); 
 
    animation: playh 1s steps(4) infinite, playv 3s steps(3) infinite; 
 
} 
 

 
@keyframes playv { 
 
    0% { background-position-y: 0px; } 
 
    100% { background-position-y: -301px; } 
 
} 
 

 
@keyframes playh { 
 
    0% { background-position-x: 0px; } 
 
    100% { background-position-x: -299px; } 
 
}

<img src="https://fermmm.files.wordpress.com/2011/02/preview.jpg" /> 
 

 
<div style="text-align:center;">Sprite image</div> 
 
<div class="sample"></div>