CSS-Sprite-Sheet-Animation funktioniert nicht (Scrollen von einer Seite zur anderen)

Question

Ich benutze CSS-Animation, um ein Zeichen zu animieren. Ich habe eine Animation erfolgreich abgeschlossen, aber wenn ich andere Animationen ausprobiere, bekomme ich seltsame Affekte, wie zum Beispiel Scrolling Sideways oder Up. Ich verwende Texture Packer, um das Sprite-Blatt zu erstellen.

Durch meine Forschung habe ich verschiedene Ansätze versucht:

• Halten Sie die Sprites auf eine Zeile. Ich habe verschiedene Sprite Sheets ausprobiert, einige mit einer Zeile und andere, die mehrere Sprite Bewegungen enthalten, die 4 x8 sind.
• Bewegung mehrerer Zeichen auf einem Sprite-Blatt (Leerlauf, Lauf, Gehen,
  usw.).
• Halten Sie nur ein Zeichen Bewegung Sprite Sheet (nur im Leerlauf).

Dies sind nur einige der Dinge, die ich ohne Erfolg versucht habe. Ich bin mir nicht sicher, ob ich nicht grundsätzlich verstehe, wie Sprite-Blätter in CSS funktionieren oder ob ich einen einfachen Fehler mache. Hat jemand irgendwelche Gedanken darüber, wie meine Animationen funktionieren?

Hier ist mein Code:

HTML:

<span class="jellyYellow0001 sprite"></span> 

CSS:

@keyframes play { 
    100% { background-position: -127px; } /*I've played with this value*/ 
} 


.sprite { 

    display:inline-block; 
    overflow:hidden; 
    background-repeat: no-repeat; 
    background-image:url(jellyYellow.png); 
    width: 130px; 
    height: 110px; 
    animation: play 1s steps(8) infinite; 

} 

.jellyYellow0001 {width:124px; height:108px; background-position: -1px -1px} 
.jellyYellow0002 {width:124px; height:108px; background-position: -127px -1px} 
.jellyYellow0003 {width:124px; height:108px; background-position: -253px -1px} 
.jellyYellow0004 {width:124px; height:108px; background-position: -379px -1px} 
.jellyYellow0005 {width:124px; height:108px; background-position: -505px -1px} 
.jellyYellow0006 {width:124px; height:108px; background-position: -631px -1px} 
.jellyYellow0007 {width:124px; height:108px; background-position: -757px -1px} 
.jellyYellow0008 {width:124px; height:108px; background-position: -883px -1px} 
.jellyYellow0009 {width:124px; height:108px; background-position: -1009px -1px} 
.jellyYellow0010 {width:124px; height:108px; background-position: -1135px -1px} 

Hier ist eine Version des Sprite-Blattes.

Hier ist ein weiteres Sprite Sheet, das ich ausprobiert habe.

Answer 1

@keyframes play { 
 
    100% { background-position: -127px; } /*I've played with this value*/ 
 
} 
 

 

 
.sprite { 
 
\t display:inline-block; 
 
    overflow:hidden; 
 
    background-repeat: no-repeat; 
 
    background-image:url(https://i.stack.imgur.com/y0Xxv.png); 
 
    width: 130px; 
 
    height: 110px; 
 
    animation: play 1s steps(8) infinite; 
 
\t animation-iteration-count: 1; 
 

 
} 
 

 
.jellyYellow0001 {width:124px; height:108px; background-position: -1px -1px}

<span class="jellyYellow0001 sprite"></span>

im Sprite-Selektor U benötigen Animation-Iteration-count hinzuzufügen: 1;