title: css sprite animation : delay between loops
body: <p>i'm trying to animate a png sprite.
  My goal here is to rotate an object smothly, ie with no pause
  or visual inconsistency between loops, like a well designed 'busy' gif will look like.</p>
  
  <p>Why not go with a gif? Because i want more colors in my images,
  and i'm currently trying to learn about the new css3 stuff too.</p>
  
  <p>So, i came up with this stylesheet:</p>
  
  <pre><code>.hexagon
  {
      width:250px;
      height:250px;
      background:url('http://i59.servimg.com/u/f59/18/89/55/67/hexago10.png');    
      -webkit-animation: playhexagon .5s steps(18) infinite;
      animation: playhexagon .5s steps(18) infinite;
  }
  
  @-webkit-keyframes playhexagon {
     0% { background-position: 0px; }
     100% { background-position: -4500px; }
  }
  
  @keyframes playhexagon {
     0% { background-position: 0px; }
     100% { background-position: -4500px; }
  }
  </code></pre>
  
  <p>I use 18 steps because there is 18 images in the sprite, and <code>infinite</code>, obviously, for the infinite animation.</p>
  
  <p>As you can check <a href="http://jsfiddle.net/sk9o3L3g/2/" rel="nofollow noreferrer" title="here">here</a> this is not so bad, but not perfect : i don't know how to suppress the (small) delay between the loops.</p>
  
  <p>if you don't see it clearly, try to change the animation duration : switching between 0.5 and 1s made it somehow more obvious for me.</p>
  
  <p>I think it's because the animation start and end positions in the sprite are in fact the same image (0px and -4500px render the same image in the sprite)</p>
  
  <p>I saw that the <code>0% { background-position: 0px; }</code> instruction is optional, the animation play exactly the same way without it, but i wrote it to explicitely state what is going on.</p>
  
  <p>I tried some tricks with no results to resolve this:</p>
  
  <ul>
  <li>show only one time the first image in the sprite betwwen loops, or </li>
  <li>double the speed of the end and start animation so this will go unnoticed for the eye</li>
  </ul>
  
  <p>I would prefer using only css, but if it's not possible i will go full javascript. So long for the new css3 animation stuff.</p>
  
  <p>Thanks for any insight and such</p>