jquery点击控制动画暂停开始

一下是从w3c上面考下来了的，

animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]*

独立属性

[ animation-name ]：检索或设置对象所应用的动画名称

[ animation-duration ]：检索或设置对象动画的持续时间

[ animation-timing-function ]：检索或设置对象动画的过渡类型

[ animation-delay ]：检索或设置对象动画延迟的时间

[ animation-iteration-count ]：检索或设置对象动画的循环次数

[ animation-direction ]：检索或设置对象动画在循环中是否反向运动

[ animation-play-state ]：检索或设置对象动画的状态。 

 

一下是代码部分：写的比较简单，也没有考虑浏览器兼容问题了  

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>vertical-align</title>
</head>
<style>
.wap{width:200px;height:200px;background:red;}
.move{animation:move 3s ease 0s infinite alternate;}
@keyframes move{
0%{opacity:0;transform:rotate(0deg);}
50%{opacity:0.5;transform:rotate(90deg);}
100%{opacity:1;transform:rotate(180deg);}
}

</style>
<body>
<div class="wap move" onclick="run()"></div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var flag = true; //用作标志
function run(){
if(flag==true){
$('.move').css('animation-play-state','paused'); //设置动画状态--暂停
flag = false;
}else{
$('.move').css('animation-play-state','running');//设置动画状态--开始
flag = true;
}
}
</script>
</body>

 

posted @ 2016-11-20 21:11  浮世薄凉  阅读(3289)  评论(0)    收藏  举报