CSS3的Animation有八個屬性：
animation-name
運動的名稱（規(guī)定需要綁定的keyframe 名稱）
animation-duration
運動時間
animation-delay
運動延遲時間
animation-iteration-count
規(guī)定動畫播放的次數(shù)（infinite表示無限次播放）
animation-direction
規(guī)定是否應該輪流反向播放動畫。
（normal正常播放，默認值；
alternate：輪流反向播放；）
animation-play-state
規(guī)定動畫正在運行還是暫停。
（paused：規(guī)定動畫已暫停；
running：規(guī)定動畫正在播放。）
animation-fill-mode
動畫在播放之前或之后，其動畫效果是否可見。
（none：不改變默認行為；
forwards：當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）；
backwards：在 animation-delay 所指定的一段時間內(nèi)，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）；
both：向前和向后填充模式都被應用；）
animation-timing-function
規(guī)定動畫的速度曲線
（linear：勻速；
ease：低速開始，加速，結束前變慢；
ease-in：加速；
ease-out：減速；
ease-in-out：低速開始和結束；
cubic-bezier(n,n,n,n)：在 cubic-bezier 函數(shù)中自己的值。可能的值是從 0 到 1 的數(shù)值）。
用css3的animation完成一個動畫，當只有這個動畫完成時才執(zhí)行另一個事件。有兩種方法：
一、設置定時器：
設定一個和動畫時長一樣的time，過time事件去執(zhí)行這個函數(shù)。
setTimeout(function(){ },time);
二、當-webkit-animation動畫結束時有一個webkitAnimationEnd事件，只要監(jiān)聽這個事件就可以了。
不同瀏覽器的AnimationEnd寫法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)
例子：
-webkit-animation動畫其實有三個事件：
開始事件 webkitAnimationStart
結束事件 webkitAnimationEnd
重復運動事件 webkitAnimationIteration
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
ul{
width: 0px;
height: 0px;
position: relative;
margin: 100px auto;
opacity: 0;
animation: 2s move ease;
}
li{
width: 50%;
height: 50%;
float: left;
border-radius: 0 80%;
}
li:nth-child(2){
transform: rotate(90deg);
}
li:nth-child(3){
transform: rotate(90deg);
}
ul.move{
width: 240px;
height: 240px;
opacity: 1;
animation: 1s rotate linear infinite;
}
@keyframes rotate{
to{
transform: rotate(360deg);
}
}
@keyframes move{
100%{
width: 240px;
height: 240px;
opacity: 1;
}
}
</style>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){
var oUl=document.querySelector('ul');
oUl.addEventListener('webkitAnimationEnd',function(){
oUl.classList.add('move');
},false);
},false);
</script>
</head>
<body>
<ul>
<li style="background: deeppink;"></li>
<li style="background: deepskyblue;"></li>
<li style="background: gold;"></li>
<li style="background: greenyellow;"></li>
</ul>
</body>
</html>
