title: Smooth CSS animation with sprite
body: <p>I have tried to animate my sprite and it is similar to <a href="http://jsfiddle.net/0q25gq7k/" rel="nofollow">this</a>. I would appreciate if someone can show how to make it more smooth. I have only 3 images in my sprite with approx. 1 second delay, so the transition is quite bad. </p>
  
  <p>I've tried to use:</p>
  
  <pre><code>from {
      -webkit-transform: translateX(..);
  }
  to { 
      -webkit-transform: translateX(..);
  }
  </code></pre>
  
  <p>But it did not work.
  I would really appreciate any help.</p>