css3新增了一個(gè)好玩的屬性：animation，雖然用它做出來的動(dòng)畫并沒有多么炫酷流暢迹蛤，但是它減少了代碼量并且在瀏覽器性能上有著明顯的有點(diǎn)。
animation基本用法是：
animation:name keeping-time animate-function delay times iteration final
/////////注：animation是復(fù)合屬性，它可以合著用也可以分開寫。
第一個(gè)參數(shù)：name
動(dòng)畫的名字蝗岖，css3用‘keyframes 關(guān)鍵幀’來定義動(dòng)畫
例子：
@-webkit-keyframes name{
0%{top:0;}
100%{top:10px;}
}
前綴-webkit-表示webkit內(nèi)核瀏覽器（Chrome、Safari和opera）榔至，上面代碼定義了一個(gè)動(dòng)畫抵赢，名子叫name，效果是使高度從0變化到10,0%~100%為整個(gè)過程唧取，也可以定義多段如：0%~20~50%~100%铅鲤。
第二個(gè)參數(shù)：animation-duration：
整個(gè)動(dòng)畫的持續(xù)時(shí)間，必須帶上時(shí)間單位枫弟，s或者ms均可邢享；
第三個(gè)參數(shù)：animation-timing-function：
運(yùn)動(dòng)方式（動(dòng)畫方式）的貝賽爾曲線,它的值有：
linear：線性過渡。
ease：平滑過渡淡诗。
ease-in：由慢到快骇塘。
ease-out：由快到慢伊履。
ease-in-out：由慢到快再到慢。
等款违。
第四個(gè)參數(shù)：animation-delay：
動(dòng)畫延遲執(zhí)行的時(shí)間唐瀑，單位也是s或者ms，值得注意的是奠货，即使延遲時(shí)間為0介褥，也必須加上時(shí)間單位，如果寫成直接寫成0递惋，在Chrome和Safari(webkit)下是沒問題的柔滔，但是在FF(gecko)下無效。
例子：
animation-delay:0.5s;? ? 動(dòng)畫開始前延遲的時(shí)間為0.5s
第五個(gè)參數(shù)：times (animation-iteration-count)：
動(dòng)畫循環(huán)執(zhí)行的次數(shù)萍虽，無單位睛廊，infinite為無限循環(huán)。
infinite：無限循環(huán)
number: 循環(huán)的次數(shù)
例子：
animation-iteration-count: infinite | number;
第六個(gè)參數(shù)：animation-direction：
normal：正常方向
reverse：反方向運(yùn)行
alternate：動(dòng)畫先正常運(yùn)行再反方向運(yùn)行杉编，并持續(xù)交替運(yùn)行
alternate-reverse：動(dòng)畫先反運(yùn)行再正方向運(yùn)行超全，并持續(xù)交替運(yùn)行
如果動(dòng)畫循環(huán)，循環(huán)的方式是：alternate(偶數(shù)次向前播放邓馒，奇數(shù)次向后播放)嘶朱、normal(每次都向前播放)。
第七個(gè)參數(shù)：animation-fill-mode：
動(dòng)畫的最后（達(dá)到100%）時(shí)的狀態(tài)光酣，取值有：backward（回到初始狀態(tài)）疏遏、forwards（停在最終狀態(tài)）、none救军、both财异。
每個(gè)參數(shù)也可以單獨(dú)寫，最后用的時(shí)候記得加瀏覽器前綴唱遭。
例：
.classname{
-webkit-animation:name 6s linear 0ms infinite normal forwards;
-moz-animation:name 6s linear 0ms infinite normal forwards;
-o-animation:name 6s linear 0ms infinite normal forwards;
animation:name 6s linear 0ms infinite normal forwards;}
將不帶前綴的寫在最后面好處是等到animation被所有瀏覽器認(rèn)可戳寸，可以擯棄前綴的時(shí)候可以覆蓋前面的樣式。
第八個(gè)參數(shù)：animation-play-state? 檢索或設(shè)置對(duì)象動(dòng)畫的狀態(tài)
animation-play-state:running | paused;
running:運(yùn)動(dòng)
paused: 暫停
animation-play-state:paused; ? ? ? 當(dāng)鼠標(biāo)經(jīng)過時(shí)動(dòng)畫停止拷泽，鼠標(biāo)移開動(dòng)畫繼續(xù)執(zhí)行
