如何在懸停時動畫背景圖片？

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

但相同的動畫，如果我上懸停做，不會像#img,#img:hover{...}只有CSS3工作。無論如何，我希望我的動畫迭代在#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 
}); 

更新2：

我認爲我的關鍵問題是背景圖像，當停止動畫和重放動畫時，我需要更改背景圖像，因爲它停止後是img-3。所以下面也不行，我很驚訝！

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

UPDATE3：

這裏是演示了其改變與應用CSS3動畫背景圖片不能正常工作：

這個演示更改背景點擊時到按鈕，因爲我刪除css3動畫通過在css樣式表中重命名爲#img至#imgz。現在將其更改爲#img並運行，然後您會發現按鈕點擊不會更改背景圖片！是的，令人驚訝的是不工作，爲什麼？

demo

Answer 1

請按照下面給出的鏈接：

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

我希望這會幫助你。 [的jsfiddle] [1]

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