title: CSS3 animation change background-image without sliding
body: <p>This is the current code I have</p>
  
  <pre><code>.jack_hitting{
          -moz-animation: jackhitting 0.5s infinite;
      }
  
      @-moz-keyframes jackhitting {  
          0% {  
            background-position: -8px -108px;
          } 
  
          20% {  
            background-position: -41px -108px;
          }
  
          40% {  
            background-position: -73px -108px;
          }
  
          60% {  
            background-position: -105px -108px;
          }
  
          80% {  
            background-position: -137px -108px;
          }
  
          100% {  
            background-position: -8px -108px;
          }
      }
  </code></pre>
  
  <p>and this cycles through the background image sliding to the next one, but i would rather have it not slide, so that it basically works like the following js code:</p>
  
  <pre><code>document.getElementById('id').style.backgroundPosition='-8px -108px';
  </code></pre>
  
  <p>Is there an effect that can do what I would like?</p>
  
  <p>Thanks in advance :)</p>