css3 实现动画效果，怎样使他无限循环动下去？

html-css031

css3 实现动画效果，怎样使他无限循环动下去？,第1张

鼠标悬停，图标会一直不停旋转。 

如果实现图标一直不停旋转，则需要使用animation动画。先制作动画的各个关键帧，然后在图标中运用这一动画。

具体操作如下：

可以实现循环部分代码：

<script>

$("div").on("mouseenter", function() {

this.style.webkitAnimationPlayState = "running"

})

//重复播放事件

$("div").on('webkitAnimationIteration', function() {

this.style.webkitAnimationPlayState = "paused"

})

</script>