歸納總結了一下，我們口中說的CSS3 動畫包括兩種類型：

他們都使我們的網頁“動”起來了，兩者功能類似，不過兩者存在著一下細微的差別：

Transition（過渡）是通過定義元素從 起點的狀態 和 結束點的狀態 ，在一定的時間區間內實現元素平滑地過渡或變化 的一種補間動畫機制。

而Animation（動畫）不僅可以定義元素從 起點的狀態 和 結束點的狀態，而且他可以定義元素 在任意兩個點之間的關鍵幀（Keyframes）的狀態，在指定的時間內實現元素平滑地過渡或變化 的一種補間動畫機制。

使用transition制作一個簡單的transition效果時，元素包括了起點狀態的屬性和結束點狀態的屬性，一個開始執行動畫時間（transition-delay）和一個延續動作時間（transition-duration）以及動作的變換速率（transition-timing-function），這樣就可以進行一個簡單的動畫了。如果我們要控制的更細一些，比如說我要第一個時間段執行什么動作，第二個時間段執行什么動作，這樣我們用Transition就很難實現了，此時我們需要關鍵幀（Keyframes）來更加精確的控制，在指定的時間內在關鍵幀（Keyframes）之間，實現元素平滑地過渡或變化 。

畫了兩個示意圖：

Transition（過渡）示意圖，1秒時間內只改某元素的顏色：

 

接下來是Animation（動畫）示意圖，前1秒時間內使元素變大，后2秒改變元素的顏色，并且使元素變為原來的大小：

其實Transition（過渡）下的?起點 和 結束點也可以理解為關鍵幀，只不過這兩點間不能定義關鍵幀，而Animation可以起點 和 結束點之間定義任意的關鍵幀。至于動畫是在指定的時間內，元素在兩個關鍵幀之間 實現平滑地過渡或變化 的一種補間動畫機制。當如動畫的前提是元素在兩個關鍵幀下狀態存在差異，即使是很小的差異，當然我們的肉眼可能看不出來。

要是你以前做過flash動畫，理解Transition（過渡）和Animation（動畫）應該非常簡單。如果我寫的你理解不了，那么你可以看看這個flash動作補間動畫的視頻教程。