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

Did you add all required browser prefixed versions for `@keyframes` (like `@-webkit-keyframes`)? Adding that makes it [work](http://jsfiddle.net/Lfmegdn5/3/) for me. — Harry, Feb 05 '15 at 13:31
@NaeemShaikh not exactly the same. As written in my post (and as seen in the keyframes) I would like the BG to move to 93% and then back to 91%. Similar but not the same to button one. — Francesca, Feb 05 '15 at 13:32
Though I haven't voted to close yet. This is probably a duplicate of http://stackoverflow.com/questions/25110510/why-doesnt-css-feature-work-in-browser-but-works-in-others — Harry, Feb 05 '15 at 13:35

Gildas.Tambo · Accepted Answer · 2015-02-05T13:49:06.157

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

score 5 · Answer 2 · answered Feb 05 '15 at 13:33

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

CSS3 keyframe animation which runs on hover

2 Answers2