title: Why is my CSS :hover @keyframes animation not working?
body: <p>I am a newbie. Why is this code not working?
  I want to make the bird fly.</p>
  
  <p>My html:</p>
  
  <pre><code>&lt;img src="http://dl.dropboxusercontent.com/u/105046436/tw.png" /&gt;
  &lt;br&gt;
  &lt;div class="twitter-bird"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.twitter-bird {
      background-image: url(http://dl.dropboxusercontent.com/u/105046436/tw.png);
      display: inline-block;
      height: 38px;
      width: 37.5px;
  }
  
  .twitter-bird:hover {
      animation: fly 0.2s steps(3) 0 infinite;
  }
  
  @keyframes fly {
      from { background-position: 0 0; }
      to { background-position: -112.5px 0; }
  }
  </code></pre>
  
  <p>JSFiddle : <a href="http://jsfiddle.net/6qHMG/" rel="nofollow">http://jsfiddle.net/6qHMG/</a></p>
  
  <p>What I want:</p>
  
  <p>I want to change the background position of the image.</p>
  
  <p>What happens:</p>
  
  <p>Image position does not change on hover.</p>
  
  <p>EDIT:
  I think the background image position does not change properly. The background-position doesn't seem to change. How do I set <code>background-position:</code> in <code>@keyframes fly</code> ?</p>