CSS3 動畫屬性

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個子屬性詳解

1. animation-name 調用動畫
   animation-name屬性，主要是用來調用動畫，其調用的動畫是經過@keyframes關鍵幀定義好的動畫。 該屬性的使用語法如右所示： animation-name: none | IDENT[ none| DENT]*;
   animation-name 是用來定義一個動畫的名稱， 其主要有兩個值。
   ·IDENT：是由@keyframes建立的動畫名稱， 換句話說 此處的 IDENT(標識符)須要和@keyframes中的IDENT一致， 若是不一致將不能實現任何動畫效果。
   ·none：爲默認值，當值爲none 時，將沒有任何動畫效果，其能夠用於覆蓋任何動畫。
2. animation-duration設置動畫播放時間
   animation-duration主要用來設置CSS3動畫播放時間， 其基本語法如右所示： animation- duration: < time>[< time>]*
   animation-duration和transition-duration使用方法相似，是用來指定元素播放動畫所持續的時間，也就是完成從0% ～100% 一次動畫所需時間， 取值< time>爲數值，單位爲秒，其默認值爲 0，這意味着動畫週期爲0，也就是沒有動畫效果。若是值爲負值會被視爲0。
3. 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。
4. animation-delay 設置動畫開始播放的時間
   animation-delay屬性用來定義動畫開始播放的時間、 是延遲仍是提早等。 該屬性的基本語法右所示： animation- delay:< time>[,< time>]* 換句話說， animation- delay 屬性用於定義在瀏覽開始 執行動畫以前等待的時間。
5. animation-iteration-count 設置動畫播放次數
   animation-iteration-count 屬性主要用來定義動畫的播放次數。其基本語法如右所示： animation-iteration-count: infinite | < number> [, infinite | < number>]* 此屬性主要用於定義動畫播放多少次，其值一般爲整數，但也可使用帶有小數的數字。其默認值 1，這意味着動畫將從開始到結束只播放一次。 若是取值爲infinite，動畫將會無限次地播放。infinite(無限循環)
6. animation-direction 設置動畫播放方向
   animation-direction屬性主要用來設置動畫播放方向， 其基本語法如右所示： animation- direction: normal | alternate [, normal | alternate]* animation- direction 是用來指定元素動畫播放的方向， 其主要有兩個值， 默認值爲 normal， 若是設置爲normal時， 動畫的每次循環都是向前播放； 另外一個值是alternate，它的做用是，動畫播放爲偶數次則向前播放，爲奇數次則向反方向播放。 例如一個彈跳動畫中， 能夠爲落下的球提供關鍵幀， 而後將animation-direction取值爲alternate來控制播放動畫的每秒中反轉它。
7. animation-play-state 設置動畫的播放狀態
   animation-play-state屬性主要用來控制元素動畫的播放狀態， 其基本語法如右所示： animation-play-state: running | paused [, running | paused]* 主要有兩個值： running 和paused。 其中running爲默認值， 主要做用相似於音樂播放器， 能夠經過paused將正在播放的動畫停下來， 也能夠經過running將暫停的動畫從新播放， 這裏的從新播放不必定是從元素動畫的開始播放， 也多是 從暫停的那個位置開始播放。 另外若是暫停了動畫的播放， 元素的樣式將回到最原始設置狀態。
8. 設置動畫時間外屬性 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屬性， 能夠修改動畫的默認行爲。簡單地理解就是告訴動畫在第一個關鍵幀上等待動畫開始，或者在動畫結束時停在最後一個關鍵幀上而不回到動畫第一幀 上， 或者同時具備這兩個效果。