title: CSS Sprite Sheet Animation not Working (Scrolling Side-to-Side)
body: <p>I using CSS animation to animate a character. I've completed one animation successfully but when I try other animations I get strange affects, like either scrolling side ways or up. I'm using Texture Packer to create the sprite sheet.</p>
  
  <p><a href="https://i.stack.imgur.com/ANRur.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ANRur.png" alt="results"></a></p>
  
  <p>Through my research I've tried different approaches:</p>
  
  <ul>
  <li>Keeping the sprites on one row. I've tried various sprite sheets,
  some with one row and others that contain multiple sprite movements
  that are 4 x8.</li>
  <li>Multiple character movements on one sprite sheet (idle, run, walk,<br>
  etc.). </li>
  <li>Keeping only one character movement sprite sheet (only idle).</li>
  </ul>
  
  <p>These are just some of things I've tried with no success. 
  I'm not sure if I just don't fundamentally understand how sprite sheets work in CSS or if I'm making a simple mistake. Anyone have any thought on how get my animations to work?</p>
  
  <p>Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span class="jellyYellow0001 sprite"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@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}
  </code></pre>
  
  <p>Here is one version of the sprite sheet.
  <a href="https://i.stack.imgur.com/y0Xxv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y0Xxv.png" alt="Sprite sheet 1"></a></p>
  
  <p>Here is another sprite sheet I've tried.
  <a href="https://i.stack.imgur.com/aSkBr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aSkBr.png" alt="Sprite sheet 2"></a></p>