如何改變精靈表代碼

Question

誰能幫我更改此代碼http://jsfiddle.net/simurai/CGmCe/

.hi { 
    width: 50px; 
    height: 72px; 
    background-image: url("http://files.simurai.com/misc/sprite.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://files.simurai.com/misc/sprite.png" /> 
<div class="hi"></div> 

所以動畫停在最後一個畫面，但更重要的是，如果我schould使用其他動畫完全相同的代碼結構，它必須停止在第二個動畫，所以它播放第一個動畫和第二個動畫流利，並停在第二個動畫的最後一個圖片。

Answer 1

要播放的動畫更換一次infinite到1，即animation-iteration-count屬性：

animation: play .8s steps(10) 2s 1; 

DEMO：http://jsfiddle.net/CGmCe/4094/