重新想，重新看 CSS3變形，過渡與動畫

最後，我們來**一下css3的動畫屬性。

之前提到過，實際上過渡也算作動畫的一種。但過渡作為動畫的缺陷在於，只能使元素屬性從乙個值「過渡」至另乙個值，但如果想要使元素的屬性值根據需要在時間軸上不斷變化，則必須使用到animation屬性。

animation屬性解決動畫問題的思路也很簡單，即通過制定關鍵幀的方式，"切割"時間，使瀏覽器一段一段的通過"過渡"完成屬性值的變化。本質上來看，animation的實現效果實際上是多個transition過渡的疊加。

具體來說，animation的控制要點主要有以下兩點：

1.製作關鍵幀並引用

（1）製作關鍵幀

關鍵幀屬性的寫法為@keyframes，用來制定一次動畫中，不同階段元素的屬性變化。舉例如下：

1
@keyframes addwidth
550% 
8to 11}

（2）引用關鍵幀

當需要使用此關鍵幀時，需要為元素新增這樣一條宣告：animation：addwidth，2s。像transition屬性一樣，關鍵幀名稱和動畫時間為動畫屬性的必須值。另外，對於animation而言，可以同時宣告多個關鍵幀，只需將不同關鍵幀用逗號分隔即可。

2.對動畫細節的設定

除了選擇好完成動畫需要的時間並設定好動畫的執行效果之外，我們其實還需要對一次動畫進行很多其他方面的操控，例如動畫延遲，動畫結束後是返回最初狀態還是保留結尾狀態，動畫速率，中止動畫等等。在css3中，這些控制需求可以通過動畫屬性下的8個子屬性得到滿足，下面進行一一介紹：

（1）animation-name通過關鍵幀名稱呼叫動畫。

其值為已設定的關鍵幀名稱或none，當設定為none時，會立即停止（覆蓋）已經設定或正在進行的任何動畫。

（2）animation-duration設定動畫的時長。

（4）animation-delay設定動畫的延遲時間。

（8）animation-fill-mode這個子屬性決定了動畫結束後屬性值應為初始狀態還是結束狀態，有四個值：none，forwards，backwards，both。

以上逐一解釋了animation動畫的八個子屬性，通過這些子屬性的運用，就可以很好的控制元素的動畫效果。

最後，再談一談animation屬性的瀏覽器相容問題，和transform類似，ie10以下的瀏覽器不支援。