CSS3 keyframe animation which runs on hover - css

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">