how to animate the background image on hover?

Question

Just see update3 only:

I've css3 animation for changing background image:

@-webkit-keyframes changeImage{
    0%{background-image: url("images/img-1.png");}
    50%{background-image: url("images/img-2.png");}
    100%{background-image: url("images/img-3.png");}
}
#img{
    -webkit-animation: changeImage 1s;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
}

But the same animation if I do on hover that won't work like #img,#img:hover{...} with just css3. Anyway, I want my animation iteration count infinite on hovering of #img.

So, how can I do it with jquery or javascript?

I was trying like this:

$('#img').hover(function(){
    $(this).css({'webkitAnimation':'changeImage 1s','webkitAnimationIterationCount':'infinite'});
});

But no luck to work. Any suggestion?

Update:

While I came to know the following works if play state is running in css3:

$('#img').click(function(){
    $(this).css({'webkitAnimationPlayState':'paused'}); //pause the animation
});

But not then following after paused:

$('#img').hover(function(){
    $(this).css({'webkitAnimationPlayState':'paused'});
    $(this).css({'webkitAnimationPlayState':'running','webkitAnimationIterationCount':'infinite'}); // doing nothing
});

Update2:

I think my key problem is with background image which when stops animating and to replay the animation I need to change the background image as it is img-3 after stopped. So the following is also not working, I'm amazed!

$('#img').hover(function(){//after animation stops and hoverd to
    $(this).css({'background-image':'url(images/img-1.png'});
});

Update3:

Here is the demo for which changing background image with css3 animation applied is not working:

This demo change the background when clicked to button as I'm removing css3 animation intensionally by renaming to #img to #imgz in css stylsheet. Now change this to #img and run then you will find the button click won't change the background image! Yes, surprisingly not working, why?

demo

Answer 1

Please follow the links given below:

http://jsfiddle.net/ktPev/1/

How can I animate my image infinitely using CSS3

<img src="http://dummyimage.com/300x300/000/fff&text=image" class="graphs" />

.graphs {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:2s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-name:orbit;
    -moz-animation-duration:2s;
}
@-webkit-keyframes orbit { 
from { -webkit-transform:rotateY(0deg) } 
to { -webkit-transform:rotateY(360deg) } 
}
@-moz-keyframes orbit { 
from { -moz-transform:rotateY(0deg) } 
to { -moz-transform:rotateY(360deg) } 
}

Answer 2

I hope it will help you. [JSFiddle][1]

[1]: http://jsfiddle.net/26j6P/9/