一、animation 概念
animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：
1）animation-name，規定需要綁定到選擇器的 keyframe 名稱。
2）animation-duration，規定完成動畫所花費的時間，以秒或毫秒計默認是0表示無動畫，單位可以設s秒或ms毫秒。
3）animation-timing-function，規定動畫的速度曲線，默認值ease，可以設linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。
4）animation-delay，規定在動畫開始之前的延遲，默認值是0，表示不延遲，立即播放動畫。單位是s秒或ms毫秒。允許設負時間，意思是讓動畫動作從該時間點開始啟動，之前的動畫不顯示。例如-2s 使動畫馬上開始，但前 2 秒的動畫被跳過。
5）animation-iteration-count，規定動畫應該播放的次數，默認值為1，即放完一遍后不循環播放。除數字外也可以設關鍵字infinite表示無限循環播放。
6）animation-direction，規定是否應該輪流反向播放動畫，可設normal，alternate，alternate-reverse。默認值是normal表示正常播放動畫。alternate表示輪轉正反向播放動畫，即動畫會在奇數次（1，3，5…）正常播放，而在偶數次（2，4，6…）反向播放。alternate-reverse正好反過來，奇數次反向播動畫，偶數次正向播動畫
二、語法
animation: name duration timing-function delay iteration-count direction;
三、使用
1）首先定義在哪里使用動畫，例：
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
這段代碼的意思就是對div定義一個五秒的名為mymove的動畫，infinite表示無限循環。
2）然后再定義動畫mymove
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
"from" 和 "to"，等同於 0% 和 100%，0% 是動畫的開始，100% 是動畫的完成，如果按照百分比描述動畫可以定義百分之零到百分之百的任意一百分點的動畫這段代碼的意思是mymove動畫是從距左邊零像術運動到距離左邊200像術，綜合上述就是對div定義一個動畫效果是歷時五秒該div從左邊0像術運動到距左邊200像術，這樣無限循環下去。
3）完整代碼
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注釋：</strong>Internet Explorer 9 以及更早的版本不支持 animation 屬性。</p>
<div></div>
</body>
</html>