一下是从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{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>