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

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

更新3:

这是使用 css3 动画更改背景图像不起作用的演示:

此演示在单击按钮时更改背景，因为我通过在 css 样式表中将 #img 重命名为 #imgz 有意删除 css3 动画。现在将其更改为#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) } 
}