title: CSS animation not working in Chrome, working in Safari
body: <p>My issue is that I have a simple twitter sprite sheet that I'm using to animate on hover. But, in Chrome, while it scoots left on hover, it doesn't animate.</p>
  
  <pre><code>#tw:hover #twitter-bird {
      margin-left:-100px;
      -webkit-animation: fly 0.2s steps(3) 0 3;
      -moz-animation: fly 0.2s steps(3) 0 3;
      animation: fly 0.2s steps(3) 0 3;
  }
  
  @-webkit-keyframes fly {
  from { background-position: 0 0; }
  to { background-position: -450px 0; }
  }
  
  @-moz-keyframes fly {
      from { background-position: 0 0; }
      to { background-position: -450px 0; }
  }
  
  @keyframes fly {
      from { background-position: 0 0; }
      to { background-position: -450px 0; }
  }
  </code></pre>
  
  <p>I have seen a few others posts about this:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/26588628/css-animation-not-working-in-chrome">CSS Animation not working in Chrome</a></li>
  <li><a href="https://stackoverflow.com/questions/31596397/css-animation-not-working-in-chrome">CSS Animation not working in Chrome</a></li>
  <li><a href="https://stackoverflow.com/questions/12265096/css3-animation-not-working-in-chrome">css3 animation not working in chrome</a></li>
  <li><a href="https://stackoverflow.com/questions/21939736/css-animation-not-working-on-chrome">CSS Animation not working on Chrome</a></li>
  </ol>
  
  <p>And most of the advice seems to be that "-webkit-" is needed to preface "animation: " in the css for chrome. But I've done that. What am I missing to get this bird to flap in chrome as well as it does in Safari and Firefox? I'll use Javascript or jQuery if I have to. Thank you!</p>