CSS3 keyframe animation which runs on hover

Question

I am trying to make a small keyframe animation.

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.

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.

However when I tried to do something similar, to use a keyframe animation called nextarrow, the animation doesn't run.

Here is a JSFiddle showing my working example (button-one) and my non-working example (button-two)

Where have I gone wrong?

http://jsfiddle.net/franhaselden/Lfmegdn5/

.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;
  }
}

Answer 1

Alternative to @jbutler483's answer use Prefix free: Break free from CSS vendor prefix hell!

.button.next{padding:5% 20%;background-image:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png);background-repeat: no-repeat;background-position: 91% center;}

.button-one.next:hover{background-position: 98% center;}

.button-two.next:hover{
   animation: nextarrow 1s infinite;
}

@keyframes nextarrow {
  0%,100% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
Simple hover version<br /><br />
<input type="submit" value="Next question" class="button button-one green next" />
<br /><br /><br /><br />
Bounce animation version<br /><br />
<input type="submit" value="Next question" class="button button-two green next">

Note: you can combine 0% and 100% since they are the same:

from

@keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}

to

@keyframes nextarrow {
  0%,100% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
}

or to this

@keyframes nextarrow {
  from,to {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
}

Answer 2

You need to prefix your keyframes as well:

DEMO

@-webkit-keyframes nextarrow{ keyframe definition here}
@-moz-keyframes nextarrow{ keyframe definition here}
@-o-keyframes nextarrow{ keyframe definition here}
@keyframes nextarrow{ keyframe definition here}

for example

.button.next{padding:5% 20%;background-image:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png);background-repeat: no-repeat;background-position: 91% center;}

.button-one.next:hover{background-position: 98% center;}

.button-two.next:hover{
   -webkit-animation: nextarrow 1s infinite;
   -moz-animation: nextarrow 1s infinite;
   -o-animation: nextarrow 1s infinite;
   animation: nextarrow 1s infinite;
}

@-webkit-keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}
@-o-keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}
@-moz-keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}
@keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}

Simple hover version<br /><br />
<input type="submit" value="Next question" class="button button-one green next" />
<br /><br /><br /><br />
Bounce animation version<br /><br />
<input type="submit" value="Next question" class="button button-two green next">