如何动画所有精灵图片？

Question

如何为所有图像精灵设置动画时，如果您选择的图像精灵不包含一行图像？

**这一个例子这里有一个线图像**

链接：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>

现在这个例子中包含子画面图像不是一条线。但包含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

两个独立的关键帧动画创建遍历水平4帧和3帧垂直。当一个方向动画正在播放时，另一个必须被冻结。由于1s设置为经过4个水平帧，所以下一个垂直帧将在1s后开始，因此垂直方向的持续时间等于1s×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>