如何在悬停时为背景图像设置动画？

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/