首先說(shuō)明一下animation的語(yǔ)法:

animation:?name?duration?timing-function?delay?iteration-count?direction;

展開(kāi)的話:

[animation-name????????????????規(guī)定需要綁定到選擇器的?keyframe?名稱(chēng)。]
[animation-duration????????????規(guī)定完成動(dòng)畫(huà)所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。]
animation-timing-function?????對(duì)應(yīng)的值為"linear",動(dòng)畫(huà)從頭到尾的速度是相同的。????
animation-delay???????????????規(guī)定在動(dòng)畫(huà)開(kāi)始之前的延遲,此處?.4s?為0.4秒
animation-iteration-count?????對(duì)應(yīng)的值為"infinite",動(dòng)畫(huà)無(wú)限次播放。
animation-direction???????????對(duì)應(yīng)的值為"alternate",輪流反向播放動(dòng)畫(huà)。
<!--如果?animation-direction?值是?"alternate"，
則動(dòng)畫(huà)會(huì)在奇數(shù)次數(shù)（1、3、5?等等）正常播放，而在偶數(shù)次數(shù)（2、4、6?等等）向后播放。-->

[...] 中代表這句代碼有省略或不全;circle和animation搭配出現(xiàn)在Canvas中,出現(xiàn)在CSS語(yǔ)句中有點(diǎn)奇怪

-webkit-????用來(lái)兼容webkit內(nèi)核的瀏覽器,比如/* Safari and Chrome */,另外還有前綴 -moz- ,-o-