Wie animiert man alle Sprite-Bilder?

Question

Wie animiert man das gesamte Bild Sprite wenn Sie ein ausgewähltes Bild haben Sprite enthält keine Linien Bilder?

** Dieses Beispiel hat hier eine einzeilige Bild **

-Link: 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>

nun dieses Beispiel enthält Sprite Bilder, die nicht eine Zeile ist. Enthält jedoch 3 Reihen von Sprite-Bildern. Wie animierst du das wie der Link oben das Code-Snippet? Benutze ich jquery/javascript um es anzuzeigen? Bitte helfen Sie.

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

Zwei separate Keyframe Animationen werden erstellt horizontal 4 Frames zu durchqueren und 3 Rahmen in vertikaler Richtung. Wenn eine Richtung Animation im Spiel ist, muss der andere eingefroren werden.

Da 1s auf 4 horizontale Rahmen gesetzt ist, würde der nächste vertikale Rahmen 1s später beginnen, und daher ist die vertikale Richtung gleich 1s x 3 vertikale Rahmen.

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>