本文介绍了一种利用CSS3实现动画循环播放的方法，并通过监听鼠标悬停事件控制动画的开始与暂停，确保动画能够根据用户交互触发播放。
css3定义的动画默认只播放一次，之后重新绑定到节点也无效，无法按期望由事件触发，重新播放。
解决方案：设置动画无限循环播放，初始状态设为暂停，监听到事件后修改状态为播放，监听循环播放事件时修改状态为暂停。
以下代码只在chrome测试通过。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
div
{
width:100px;
height:100px;
background:red;
/* infinite 无限循环 */
-webkit-animation:myfirst 2s infinite paused;
}
@-webkit-keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
<script>
$("div").on("mouseenter", function() {
this.style.webkitAnimationPlayState = "running";
});
//重复播放事件
$("div").on('webkitAnimationIteration', function() {
this.style.webkitAnimationPlayState = "paused";
});
</script>
</body>
</html>
扫一扫
1901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
