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

html-css013

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

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

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

具体操作如下:

可以实现循环部分代码:

<script>

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

this.style.webkitAnimationPlayState = "running"

})

//重复播放事件

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

this.style.webkitAnimationPlayState = "paused"

})

</script>