一下是從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>