css3中製作動畫的三個屬性：transform，transition，animation。

　　本文初步介紹這三個屬性的使用條件和使用方法。

　　首先，我們先了解這幾個單詞的中文解釋：

　　　　　　　　　　　　　　　　　　　　　transform：變換；裝換；

　　　　　　　　　　　　　　　　　　　　　transition：過渡；轉變；

　　　　　　　　　　　　　　　　　　　　　animation：動畫；動畫模組；

　　那這些屬性到底怎樣對元素產生作用呢？

　　我們看先transform。

　　transform屬性包括：rotate（）旋轉 / translate（）水平位移/skew（）傾斜/scale（）縮放

　　transform就是改變元素在頁面中的位置或者狀態。

　　如果我們把動畫當做運動的汽車，transform就好比汽車的方向盤，通過這個方向盤，我可以控制四個輪胎（transform的屬性值），來達到想要的目的地。

　　這裡我們要將另外兩個屬性一起說，因為它倆的屬性有些相似。

　　transition屬性包括：transition-property：檢索或設定物件中的參與過渡的屬性。

　　　　　　　　　　：transition-duration：檢索或設定過濾的持續時間。

　　　　　　　　　　：transition-delay：檢索或設定延遲過渡的時間。

　　　　　　　　　　：transition-timing-function：檢索或設定過渡的動畫。

　　animation包括      ：animation-name：定義動畫名稱。

　　　　　　　　       ：~ -duration :持續時間

　　　　　　　　       ：~-timing-function:過渡型別

　　　　　　　　       ：~-dely:延遲時間

　　　　　　　　       ：~iteration-count:迴圈次數

　　　　　　　　       ：~-direction:是否反向

　　　　　　　　       ：~-play-state:動畫的狀態

　　animation還有個重要的屬性：keyframes，它的意思是“關鍵幀”，大家都知道電影是一幀一個畫面，許多幀連線在一起，就形成了動態的畫面。

　　@keyframes name{from{初始狀態屬性}to{結束狀態屬性}}或者@keyframes name{0%{初始}100%{結束}}

　　keyframes就是開啟animation的鑰匙，設定了每個階段要動作的元素的狀態。

　　transition和animation的相同點都是隨著時間改變元素的屬性值。而不同點是transition要有一個事件的觸發，而animation則不需要，它需要明確的動畫屬性。

　　還是比作運動的汽車，我們把transition當做汽車的手動檔，只有你給它一個動作，才能改變汽車的狀態。而animation就好像汽車的導航，給了目的地（-name）

　，它給汽車規劃道路，預算到達的時間（-duration），速度多少適合（-timing-function）等等。

　　汽車只要有這些東西才能更好地運動起來，所以我們的動畫也是這樣，這裡說的很簡單，只是籠統介紹了著三個屬性，不太詳細，只是我個人的一點點理解，不足

　　之處，還請見諒。