title: CSS transition on png sequence using steps
body: <p>I'm trying to make an animation using a PNG sequence, which has a transition on hover, and animates back when the hover state ends.</p>
  
  <p>For this I'm using a css transition with a "steps" timing function, like so:</p>
  
  <pre><code>transition:background .5s steps(9, end);
  </code></pre>
  
  <p>See the fiddle for a live example (I've used a random PNG sprite that I Googled, it's not the one I'm actually using)</p>
  
  <p><a href="http://jsfiddle.net/MLWL5/" rel="noreferrer">http://jsfiddle.net/MLWL5/</a></p>
  
  <p>Basically this is working fine, when you hover over the element slowly. When you quickly hover on and off the element, the transition seems to trigger when the background image if halfway through the previous transition, and then the number of steps don't match which will get an undesired effect.</p>
  
  <p>I could use javascript to trigger the transition, but does anyone know if there's a CSS only solution for this?</p>