1.瀏覽器支持情況
Internet Explorer 10、Firefox 以及 Opera 支持 animation 屬性唬渗。
Safari 和 Chrome 支持替代的 -webkit-animation 屬性哮伟。
注釋：Internet Explorer 9 以及更早的版本不支持 animation 屬性肩榕。
2.基本用法
animation:name duration timing-function delay iteration-countdirection;
屬性
animation 屬性是一個(gè)簡寫屬性，用于設(shè)置八個(gè)動(dòng)畫屬性：
animation-name? 規(guī)定需要綁定到選擇器的 keyframe 名稱阶剑。吃沪。
animation-duration 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間汤善，單位秒或毫秒，默認(rèn)是0
animation-timing-function 規(guī)定動(dòng)畫的速度曲線
animation-delay? 規(guī)定在動(dòng)畫開始之前的延遲票彪。
animation-iteration-count? 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)萎津。
animation-direction 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。
animation-play-state 控制動(dòng)畫的暫停處理
animation-fill-mode
注釋：請始終規(guī)定 animation-duration 屬性抹镊，否則時(shí)長為 0，就不會(huì)播放動(dòng)畫了荤傲。
語法
1. animation-name：keyframename|none;
2. animation-duration:time;
3. animation-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
? ? ? ? linear 動(dòng)畫從頭到尾的速度是相同的垮耳。
? ? ? ? ease? 默認(rèn)。動(dòng)畫以低速開始遂黍，然后加快终佛，在結(jié)束前變慢。
? ? ? ? ease-in 動(dòng)畫以低速開始雾家。
? ? ? ? ease-out 動(dòng)畫以低速結(jié)束铃彰。
? ? ?? ease-in-out? 動(dòng)畫以低速開始和結(jié)束。
? ? ? ? cubic-bezier(n,n,n,n)??? 在 cubic-bezier 函數(shù)中自己的值芯咧⊙雷剑可能的值是從 0 到 1 的數(shù)值。
4. animation-delay：time;
5. animation-iteration-count:n | infinite
? ? ? ? ? n 定義動(dòng)畫播放次數(shù)的數(shù)值敬飒。
? ? ? ? ? infinite? 規(guī)定動(dòng)畫應(yīng)該無限次播放邪铲。
6. animation-direction:normal | alternate;
? ? ? ? ? normal 默認(rèn)值。動(dòng)畫應(yīng)該正常播放无拗。
? ? ? ? ? alternate 動(dòng)畫應(yīng)該輪流反向播放带到。
7. animation-play-state: paused
