CSS3 Animation - Infinite Hover Arrow

I’m trying to animate a background image so that when you hover a link it infinitely (as long as you’re hovered over the link) will move back and forth between 905 and 100%. I created a JSFiddle to play in but it doesn’t really transition into any animation, but instead just kind of moves the background. JSFiddle


a{display: block; background: url('thin-right-arrow.png') no-repeat right center; widht: 100%:}
a {background-position: 90% center;}
a:hover {background-position: 100% center; -webkit-animation: animatedBackground 40s linear infinite;}
@keyframes animatedBackground {
  from { background-position: 90% center; }
  to { background-position: 100% center; }


You needed @-webkit-keyframes animate for the animation to work in -webkit browsers.

Note, I haven’t added any other vendors, so it will only work in -webkit browsers.

There is no need for JS/jQuery if you want the animation to last while hovering over the link (example). However, if you want the animation to start upon hovering over the link, and then go infinitely, here is the jQuery based solution: jsFiddle example




.animate {
  background-position: 90% center;
  -webkit-animation: animate 4s infinite;
@-webkit-keyframes animate {
  50% {
    background-position: 100% center;