nimation
CSS3中真正的動畫屬性是animation，而前面的transform和transition都只是對DOM元素的變形或者是狀態的過渡。實際上，CSS3所支援的動畫效果只是填充動畫，也就是說先設定整個動畫生命週期中的幾個關鍵狀態（key  frame，關鍵幀），然後動畫將自行計算並模擬關鍵幀之間的過渡。那麼在設定animation的屬性之前就必須先設定好關鍵幀了。
關鍵幀@keyframes的語法結構如下：
@keyframesNAME {
         a% {
         /*CSS屬性*/
         }
         b% {
                  /*CSS屬性*/
         }
         ...
}
NAME表示動畫的名字；a%、b%表示以百分號結尾的百分數，用於設定該關鍵幀在動畫生命週期中的位置；百分數後面的{ } 中則需要寫成該關鍵幀狀態下CSS屬性的值。另外，如果同一個百分數值在@keyframes中出現多次，那麼後出現的將覆蓋先出現的；並且關鍵幀在@keyframes中時無序的。
設定完關鍵幀後就可以繼續設定animation了。


animation-name
指定選用的動畫的名字，即keyframes中的NAME。
animation-duration
同transition-duration。
animation-timing-function
同transition-timing-function。
animation-delay
同transition-delay。
animation-iteration-count
設定動畫執行的次數，其值可以是數字也可以是infinite（迴圈執行）。
animation-direction
設定動畫執行的方向，其值可以是normal（正常順序播放）或alternate（反向播放）。