title: CSS3 keyframe animation which runs on hover
body: <p>I am trying to make a small keyframe animation. </p>
  
  <p>When the user hovers on a button, I want the background image to move slightly to the right, then back again. So a little "bounce" movement.</p>
  
  <p>In my first example I used a simple hover in CSS that changed the background position from 91% to 93% which results in movement when hovered.</p>
  
  <p>However when I tried to do something similar, to use a <em>keyframe animation</em> called <code>nextarrow</code>, the animation doesn't run.</p>
  
  <p>Here is a JSFiddle showing my working example (<code>button-one</code>) and my non-working example (<code>button-two</code>)</p>
  
  <p>Where have I gone wrong?</p>
  
  <p><a href="http://jsfiddle.net/franhaselden/Lfmegdn5/" rel="nofollow">http://jsfiddle.net/franhaselden/Lfmegdn5/</a></p>
  
  <pre><code>.button-two.next:hover{
     -webkit-animation: nextarrow 1s infinite;
     -moz-animation: nextarrow 1s infinite;
     -o-animation: nextarrow 1s infinite;
     animation: nextarrow 1s infinite;
  }
  
  @keyframes nextarrow {
    0% {
      background-position: 91% center;
    }
    50% {
      background-position: 93% center;
    }
    100% {
      background-position: 91% center;
    }
  }
  </code></pre>