如何在懸停時為背景圖像設置動畫？

Question

只看update3：

我有css3動畫用於更改背景圖片：

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

但是，如果我在懸停時執行相同的動畫，僅使用css3就無法像#img,#img:hover{...}一樣工作。 無論如何，我希望我的動畫迭代計數在#img懸停時是無限的。

那么，我該如何使用jquery或javascript？

我正在這樣嘗試：

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

但是沒有運氣。 有什么建議嗎？

更新：

當我開始了解以下工作原理（如果在css3中運行播放狀態）時：

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

但暫停后不跟隨：

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

UPDATE2：

我認為我的主要問題是背景圖片，該圖片在停止制作動畫並重播動畫時，我需要更改背景圖片，因為它在停止后為img-3 。 所以以下內容也不起作用，我很驚訝！

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

UPDATE3：

這是演示，在應用css3動畫的情況下更改背景圖像無法正常工作：

當我通過在css樣式表中將#img重命名為#img來#imgz刪除css3動畫時，此演示更改了單擊按鈕時的背景。 現在將其更改為#img並運行，然后您將發現單擊按鈕不會更改背景圖像！ 是的，出乎意料的是不起作用，為什么？

演示

Answer 1

請點擊以下鏈接：

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

如何使用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

希望對您有幫助。 [的jsfiddle] [1]

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