CSS3實現動畫效果常用方法
早期在web中要實現動畫效果，都是依賴於JavaScript或flash來完成，但在CSS3中新增加了一個新的模塊transition，它可以通過一些簡單的css事件來觸發元素的外觀變化，讓效果顯得更加細膩。簡單來說，就是通過鼠標的單擊、獲得焦點、被點擊、或對元素任何改變中觸發，並平滑地以動畫效果改變css屬性值
在css中創建簡單的過渡效果可以從以下幾個步驟來實現
（1）在默認樣式中聲明元素的初始狀態樣式
（2）聲明過渡元素最終狀態樣式，比如懸浮狀態
（3）在默認樣式中通過添加過渡函數，添加一些不同的樣式
1 css變形屬性
transform指一組轉換函數，transform-origin屬性指定元素的中心點在哪，新增加了第三個數transform-origin-z控制元素三維空間的中心點。transform-style的值設置為preserve-3d，建立一個3D渲染環境 transform屬性的基本語法如下： transform:none|[transform-function]|transform-function].... 可用於內聯元素和塊元素。其默認值為none，表示元素不進行變形。另一個屬性值時一系列的變形函數，表示一個或多個變形函數，以空格transform-origin屬性可以指定元素的中心點位置。默認情況下，變形 的原點在元素的中心點，或者是元素X軸和Y軸的50%處，transform-origin的語法格式如下：
transform-origin：[percentage | length | left | center | right | top | bottom] |
需要註意的是transform可以只設置一個值 也可以設置兩個值 和三個值
transform-style屬性是3D空間 的一個重要屬性，指定嵌套元素如何在3D空間中呈現 主要有兩個屬性值，flat和preserve-3D
2 過渡屬性transition
css過渡屬性
過渡屬性是一個復合屬性，主要包括以下幾個屬性
- transition-property:指定過渡或動態模擬的css屬性
- transition-duration:指定完成過渡所需的時間
- transition-timing-function:指定過渡函數
- transition-delay:指定開始出現的延遲時間
（1）transition-property屬性
transition-property用來指定過渡動畫的CSS屬性名稱，而這個過渡屬性只有具備一個中點值的屬性（需要產生動畫的屬性）才能具備過渡效果。
如要改變元素的寬度屬性，可將transition-property的屬性設置為width
（2）transition-duration屬性
transition-duration屬性主要用來設置一個屬性過渡到另一個屬性所需的時間，也就是從舊屬性過渡到新屬性花費的時間長度，俗稱持續時間
如果改變一個屬性，所持續的時間為50ms，可將該屬性的值設置為50ms
(3) transition-timing-function屬性
transition-timing-function屬性指的是過渡的“緩動函數”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，其中要包括以下幾種函數：
（4）transition-delay屬性
transition-delay屬性和transition-duration屬性極其類似，不同的是transition-duration是用來設置過渡動畫的持續時間，而transition-delay主要用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行。
如將元素的寬度從100px變為300px
（5） transation的局限性
transition的優點在於簡單易用，但是它有幾個很大的局限。
（1）transition需要事件觸發，所以沒法在網頁加載時自動發生。
（2）transition是一次性的，不能重復發生，除非一再觸發。
（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。
（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。
CSS Animation就是為了解決這些問題而提出的。
3 animation動畫
（1）@keyframes規則
keyframes被稱為關鍵幀，其類似於flash中的關鍵幀。在css3[email protected]"開頭，後滿緊跟著是動畫名稱加上一對花括號{...}，括號中就是一些不同時間段樣式規則
在一個"@keyframes"中的樣式規則可以有多個百分比構成的，如在”0%"到"100%"之間創建更多個百分比，分別給每個百分比中給需要有動畫效果的元素加上不同的樣式，從而達到一種在不斷變化的效果。
經驗與技巧：[email protected]，其中0%和100%還可以使用關鍵詞from和to來代表，其中0%對應的是from，100%對應的是to
（2） animation屬性
animation-name屬性[email protected]，需要特別註意：animation-name調用的動畫名需要和"@keyframes“定義的動畫名稱完全一致（區分大小寫），如果不一致將不具有任何動畫效果
註意：需要在Chrome和Safari上面的基礎上加上-webkit-前綴，Firefox加上-moz-。
animation-duration屬性主要用來設置CSS3動畫播放時間，其使用方法和transition-duration類似，是用來指定元素播放動畫所持續的時間長，也就是完成從0%到100%一次動畫所需的時間
animatino-timing-function屬性主要用來設置動畫播放方式。主要讓元素根據時間的推進來改變屬性的變換速率，就是動畫的播放方式。它和transition中的transition-timing-function 中的值一樣
animation-delay屬性用來定義動畫開始播放的時間，用來觸發動畫播放的時間點。和transition-delay屬性一樣，用於定義在瀏覽器開始執行動畫之前等待的時間。
animation-iteration-count屬性主要用來定義動畫的播放次數，其通常為整數，單頁可以為小數，其默認值為1，這意味著動畫將從開始到結束只播放一次；如果取值為infinite，動畫將無限次的播放。
animation-direction屬性主要用來設置動畫播放方向，其主要有兩個值：normal、alternate
normal是默認值，如果設置為normal時，動畫每次循環都是向前播放
另一個是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放
animtion-play-state屬性是用來控制元素動畫的播放狀態。其主要有兩個值：running和paused。
其中running是其默認值，可以通過該值將暫停的動畫重新比方，這裏的重新播放不一定是從元素動畫的開始播放，而是從暫定的那個位置開始播放。如果暫定了動畫的播放。元素的樣式將回到最原始設置狀態
animation-fill-mode屬性定義在動畫開始之前和結束之後發生的操作。主要具有四個屬性值：none、forwards、backwords和both。其四個屬性值對應效果如下：
在默認情況之下，動畫不會影響它的關鍵幀之外的屬性，使用animation-fill-mode屬性可以修改動畫的默認行為。簡單的說就是告訴動畫在第一關鍵幀上等待動畫開始，或者在動畫結束時停在最後一個關鍵幀上而不回到動畫的第一幀上。或者同時具有這兩個效果。
最後總結一下：
animation屬性類似於transition，他們都是隨著時間改變元素的屬性值，其主要區別在於：使用transition屬性只能通過指定屬性的初始狀態和結束狀態，然後在兩個狀態之間進行平滑過渡的方式來實現動畫；animation在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達到一種動畫的效果
4 動畫相關的事件
-webkit-animation動畫有三個事件：
開始事件 webkitAnimationStart
結束事件 webkitAnimationEnd
重復運動事件 webkitAnimationIteration
css3的過渡屬性transition，在動畫結束時，也存在結束的事件：webkitTransitionEnd（translation僅僅有這一個事件）
CSS3實現動畫效果常用方法