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

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

Answer 2

我希望它会对你有所帮助。 [的jsfiddle] [1]

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

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

2 个答案: