CSS3 動畫
雖然transition在一定的時間內可以實現元素的初始狀態在指定的時間範圍過渡最終狀態， 模擬一種過渡動畫效果，但它的功能是非常有限的。 因此，CSS3 新增了一個動畫屬性animation。與過渡屬性transition屬性不同的是，CSS3 的animation屬性可以像Flash製作動畫一樣，通過關鍵幀控制動畫的每一步， 實現更爲複雜的動畫效果。
CSS3中通過animation實現動畫和transition實現動畫非常類似，都是通過改變元素的屬性值來實現動畫效果的。
它們的區別主要在於：使用 transition屬性只能通過指定屬性的初始狀態和結束狀態，然後在兩個狀態之間進行平滑過渡的方式來實現動畫。
而animation實現動畫效果主要由兩個部分組成：
1). 通過類似Flash動畫中的關鍵幀來聲明一個動畫；
2). 在animation屬性中調用關鍵幀聲明的動畫，從而實現一個更爲複雜的動畫效果。
CSS3動畫屬性animation和CSS3的transition屬性一樣是一個複合屬性，它包含了8個屬性：
animation-name，主要用來指定一個關鍵幀動畫的名字，這個動畫名必須對應一個@keyframes規則。CSS加載時會應用animation-name指定的動畫， 從而執行動畫。
animation-duration，主要用來設置動畫播放所需時間，一般以秒爲單位。
animation-timing- function主要用來設置動畫的播放方式，與transition-timing-function類似。
http:/ /www.iis7.com/b/wzjk/
animation-delay、主要用來指定動畫開始時間，一般以秒爲單位。
animation-iteration- count、主要用來指定動畫播放的循環次數。
animation-direction、主要用來指定動畫的播放方向。
animation-play- state，主要用來控制動畫的播放狀態。
animation-fill- mode，主要用來設置動畫的時間外屬性。br/>：關鍵幀
在CSS3中，把@keyframes稱爲關鍵幀
@keyframes 的作用：
transition製作一個簡單的動畫效果時，包括了元素的初始屬性和最終屬性，一個開始執行動作時間和一個延遲動作時間以及一個動作變換速率， 其實這些值都是一箇中間值，如果要控制得更細一些，比如說要第一個時間段執行什麼動作，第二個時間段執行什麼動作（換到Flash製作動畫中來說，就是第一幀要執行什麼動作，第二幀執行什麼動作）， 這樣用transition 就很難實現了，此時也需要一個“ 關鍵 幀”來控制。 在CSS3中就是通過@keyframes屬性來實現這樣的效果的。br/>@keyframes的語法：
@keyframes具有其自己的語法規則，命名是由@keyframes開頭，後面緊跟着是“動畫的名稱”加上一對花括號“{...}”，括號中就不同時間段樣式規則，有點像CSS的樣式寫法。一個@keyframes中的樣式規則是由多個百分比構成的，如0%～100%，可以在這個規則中創建更多個百分比，分別給每個百分比中需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種不斷變化的效果，比如說移動，再比如改變元素顏色、位置、大小和形狀等。 不過有一點需要注意， 可以使用“ frome”“to”代表一個動畫是從哪開始，到哪結束，也就是說from就相當於0%，而to相當於100%。值得說的是，0%不能像別的屬性取值一樣把百分比符號省略，在這裏必須加上百分符號（%）。如果沒有加上，這個@keyframes是無效的，不起任何作用。因爲@keyframes的單位只接受百分比值。@keyframes可以指定任何順序排列來決定animation動畫變化的關鍵位置
CSS中爲元素應用動畫：
要在CSS中爲元素應用動畫， 首先要創建一個已命名的動畫，然後將它附加到該元素屬性聲明塊中的一個元素上。 動畫本身並不執行任何操作； 爲了向元素應用動畫，需要將動畫與元素關聯起來。這個要創建的動畫，必須使用@keyframes來聲明（或者對於當前的Webkit實現，使用@-webkit-keyframes），後跟所選擇的名稱，該名稱主要用於對動畫的聲明作用，然後指定關鍵幀。
：CSS3動畫8個子屬性詳解
- animation-name 調用動畫
animation-name屬性，主要是用來調用動畫，其調用的動畫是通過@keyframes關鍵幀定義好的動畫。 該屬性的使用語法如右所示： animation-name: none | IDENT[ none| DENT]*;
animation-name 是用來定義一個動畫的名稱， 其主要有兩個值。
·IDENT：是由@keyframes創建的動畫名稱， 換句話說 此處的 IDENT(標識符)需要和@keyframes中的IDENT一致， 如果不一致將不能實現任何動畫效果。
·none：爲默認值，當值爲none 時，將沒有任何動畫效果，其可以用於覆蓋任何動畫。 - animation-duration設置動畫播放時間
animation-duration主要用來設置CSS3動畫播放時間， 其基本語法如右所示： animation- duration: < time>[< time>]*
animation-duration和transition-duration使用方法類似，是用來指定元素播放動畫所持續的時間，也就是完成從0% ～100% 一次動畫所需時間， 取值< time>爲數值，單位爲秒，其默認值爲 0，這意味着動畫週期爲0，也就是沒有動畫效果。如果值爲負值會被視爲0。 - animation-timing-function 設置動畫播放方式
animation-timing-function屬性主要是用來設置動畫播放方式， 其基本語法如右所示： animation- timing- function: ease | linear | ease- in | ease- out | ease- in- out
animation-timing-function是指元素根據時間的推進來改變屬性值的變換速率，說得簡單點就是動畫的播放方式。 他和transition中的transition-timing-function一樣， 具有以下幾種變換方式： ease、ease- in、ease-in-out、 ease-out、 linear和cubic-bezier。 - animation-delay 設置動畫開始播放的時間
animation-delay屬性用來定義動畫開始播放的時間、 是延遲還是提前等。 該屬性的基本語法右所示： animation- delay:< time>[,< time>]* 換句話說， animation- delay 屬性用於定義在瀏覽開始 執行動畫之前等待的時間。 - animation-iteration-count 設置動畫播放次數
animation-iteration-count 屬性主要用來定義動畫的播放次數。其基本語法如右所示： animation-iteration-count: infinite | < number> [, infinite | < number>]* 此屬性主要用於定義動畫播放多少次，其值通常爲整數，但也可以使用帶有小數的數字。其默認值 1，這意味着動畫將從開始到結束只播放一次。 如果取值爲infinite，動畫將會無限次地播放。infinite(無限循環) - animation-direction 設置動畫播放方向
animation-direction屬性主要用來設置動畫播放方向， 其基本語法如右所示： animation- direction: normal | alternate [, normal | alternate]* animation- direction 是用來指定元素動畫播放的方向， 其主要有兩個值， 默認值爲 normal， 如果設置爲normal時， 動畫的每次循環都是向前播放； 另一個值是alternate，它的作用是，動畫播放爲偶數次則向前播放，爲奇數次則向反方向播放。 例如一個彈跳動畫中， 可以爲落下的球提供關鍵幀， 然後將animation-direction取值爲alternate來控制播放動畫的每秒中反轉它。 - animation-play-state 設置動畫的播放狀態
animation-play-state屬性主要用來控制元素動畫的播放狀態， 其基本語法如右所示： animation-play-state: running | paused [, running | paused]* 主要有兩個值： running 和paused。 其中running爲默認值， 主要作用類似於音樂播放器， 可以通過paused將正在播放的動畫停下來， 也可以通過running將暫停的動畫重新播放， 這裏的重新播放不一定是從元素動畫的開始播放， 也可能是 從暫停的那個位置開始播放。 另外如果暫停了動畫的播放， 元素的樣式將回到最原始設置狀態。 - 設置動畫時間外屬性 animation-fill-mode
animation-fill-mode屬性定義在動畫開始之前和結束之後發生的操作，其基本語法如右所示： animation-fill-mode: none | forwards | backwards | both 主要有四個值：none、forwards、backwards和both。其默認值爲none，表示動畫將按預期進行和結束，在動畫完成其最後一幀時，動畫會反轉到初始幀處。當其取值爲forwards時，動畫在結束後繼續應用最後關鍵幀的位置。當其取值爲backwards時，會在向元素應用動畫樣式時迅速應用動畫的初始幀。當其取值爲both時，元素動畫同時具有forwards和backwards效果。在默認情況之下，動畫不會影響它的關鍵幀之外的 屬性， 但使用animation-fill-mode屬性， 可以修改動畫的默認行爲。簡單地理解就是告訴動畫在第一個關鍵幀上等待動畫開始，或者在動畫結束時停在最後一個關鍵幀上而不回到動畫第一幀 上， 或者同時具有這兩個效果。