Sie auf dem richtigen Weg sind, aber die background-position ist falsch in den Keyframes. Sprite-Bilder sollten sich von rechts nach links bewegen, um eine bewegte Animation zu erzeugen, und daher sollte die Hintergrundposition von 0 0 zu -832px 0 gehen.
.sprite {
width: 114px;
height: 114px;
display: block;
background: transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
animation: walker 1s steps(8) infinite;
/* image size is 832x228, so height is set as half of it */
}
@keyframes walker {
0% {
background-position: 0 0;
}
100% {
background-position: -832px 0px;
}
}
<div class='sprite'></div>
Wie in Robert C Antwort erwähnt, wird dies noch nicht die zweite Reihe der Bilder erhalten zu zeigen. Dies liegt daran, dass sich der Y-Teil von background-position innerhalb der Keyframes nicht ändert. Das folgende Snippet, das freundlicherweise von Mishko Vladimir beigesteuert wurde, ist eine Möglichkeit, sie zur Anzeige zu bringen, aber das Problem ist, dass wenn die Nr. Wenn die Anzahl der Schritte auf 16 erhöht wird (um alle Sprites anzuzeigen), funktioniert die Animation nicht mehr richtig.
Außerdem blinkt an der Stelle, an der sich die Y-Position ändert. Also, meine Empfehlung wäre, alle 16 Sprites in dieselbe Zeile anstatt zwei zu setzen.
.sprite {
width: 114px;
height: 114px;
display: block;
background: transparent url(http://i.stack.imgur.com/UOPXb.png) 0 0 no-repeat;
animation: walker 1s steps(8) infinite;
/*832x228*/
}
@keyframes walker {
0% {
background-position: 0 0;
}
50% {
background-position: -832px 0px;
}
51% {
background-position: 0 -114px;
}
100% {
background-position: -832px -114px;
}
}
<div class='sprite'></div>
vielen Dank – pexichdu
Gern geschehen @pexichdu. Wie Robert in seiner Antwort erwähnt hat, wenn Sie wollen, dass die untere Reihe von Bildern auch in die Animation kommt, wäre es schwierig. Es ist besser, sie in die gleiche Reihe zu legen. – Harry
@MishkoVladimir: Ich werde Ihre Änderung akzeptieren, weil Sie ein paar sehr gültige Änderungen vorgenommen haben. Allerdings werde ich den Loop-Teil für die zweite Zeile entfernen, weil es nicht wie erwartet funktioniert. Zum Beispiel gibt es nur 8 Schritte, so dass wir nicht alle 16 Sprites sehen können. Als nächstes sehen wir ein Blinken, bei dem das Bild vom letzten Sprite in der obersten Reihe zum ersten in der unteren Reihe springt. Bitte nicht verwechseln. Ich schätze Ihren Beitrag. – Harry