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

只需查看更新3即可：

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

但是，如果我在hover上执行相同的动画，它不会像css3那样工作。无论如何，我希望我的动画迭代在#img悬停时计数无限

那么，我如何使用jquery或javascript实现这一点呢

我试着这样做：

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

但是没有工作的运气。有什么建议吗

更新：

当我了解到在css3中运行play state时，以下功能会起作用：

$('#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 stylsheet中将css3动画重命名为

#img

为

#imgz

时，此演示在单击按钮时更改背景。现在将其更改为

#img

并运行，然后您将发现按钮单击不会更改背景图像！是的，令人惊讶的是没有工作，为什么

---

请点击以下链接：

.图表{
-webkit动画迭代计数：无限；
-webkit动画计时功能：线性；
-webkit动画名称：orbit；
-webkit动画持续时间：2秒；
-moz动画迭代次数：无限；
-moz动画计时功能：线性；
-moz动画名称：轨道；
-moz动画持续时间：2s；
}
@-webkit关键帧动态观察{
来自{-webkit变换：rotateY（0deg）}
到{-webkit变换：旋转（360度）}
}
@-moz关键帧环绕{
来自{moz变换：rotateY（0deg）}
到{moz变换：旋转（360度）}
}

我希望它能帮助你。[JSFiddle][1]

---

[1] ：

对不起，你误解了我的问题。我希望迭代计数为1，但悬停为无限。

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