css3 animation 的基礎認識.

css3 中的 animation屬性主要用來作動畫的,詳細的文章看:http://www.w3cplus.com/content/css3-animation

調用animation的方法:animation-name(動畫名稱) animation-duration(播放動畫的總時長) animation-timing-function(動畫的播放方式:

　　ease  ease-in  ease-in-out

　　linear  cubic-bezier　　

) animation-delay(動畫開始執行時間) animation-iteration-count(循環次數) ...

 

在開始介紹Animation以前咱們有必要先來了解一個特殊的東西，那就是"Keyframes",咱們把他叫作「關鍵幀」，

玩過flash的朋友可能對這個東西並不會陌生。下面咱們就一塊兒來看看這個「Keyframes」是什麼東西。前面咱們

在使用transition製做一個簡單的transition效果時，咱們包括了初始屬性和最終屬性，一個開始執行動做時間

和一個延續動做時間以及動做的變換速率，其實這些值都是一箇中間值，若是咱們要控制的更細一些，好比說我

要第一個時間段執行什麼動做，第二個時間段執行什麼動做（換到flash中說，就是第一幀我要執行什麼動做，第

二幀我要執行什麼動做），這樣咱們用Transition就很難實現了，此時咱們也須要這樣的一個「關鍵幀」來控制。那

麼CSS3的Animation就是由「keyframes」這個屬性來實現這樣的效果。下面咱們一塊兒先來看看Keyframes:

Keyframes具備其本身的語法規則，他的命名是由"@keyframes"開頭，後面緊接着是這個「動畫的名稱」加上一對

花括號「{}」，括號中就是一些不一樣時間段樣式規則，有點像咱們css的樣式寫法同樣。對於一個"@keyframes"中

的樣式規則是由多個百分比構成的，如「0%」到"100%"之間，咱們能夠在這個規則中建立多個百分比，咱們分別給

每個百分比中給須要有動畫效果的元素加上不一樣的屬性，從而讓元素達到一種在不斷變化的效果，好比說移動，改

變元素顏色，位置，大小，形狀等，不過有一點須要注意的是，咱們可使用「fromt」「to」來表明一個動畫是從哪開始

，到哪結束，也就是說這個 "from"就至關於"0%"而"to"至關於"100%",值得一說的是，其中"0%"不能像別的屬性

取值同樣把百分比符號省略，咱們在這裏必須加上百分符號（「%」）若是沒有加上的話，咱們這個keyframes是無效

的，不起任何做用。由於keyframes的單位只接受百分比值。

 

下面貼上一個簡單的動畫效果樣式(當鼠標移動到圖片上面時圖片會扭曲放大縮小效果):

/**
　　本代碼不是原創,只是進行了些修改,謝謝原做者的貢獻
*/
img:hover{
    -webkit-animation: tada 1s .2s ease both;
    -moz-animation: tada 1s .2s ease both;
}
@-webkit-keyframes tada{
    0%{-webkit-transform:scale(1);}
    10%, 20%{-webkit-transform:scale(0.5) rotate(10deg);}
    30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) rotate(-10deg);}
    40%, 60%, 80%{-webkit-transform:scale(1.1) rotate(10deg);}
    100%{-webkit-transform:scale(1) rotate(0);}
}
@-moz-keyframes tada{0%{-moz-transform:scale(1);}
10%, 20%{-moz-transform:scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90%{-moz-transform:scale(1.1) rotate(3deg);}
40%, 60%, 80%{-moz-transform:scale(1.1) rotate(-3deg);}
100%{-moz-transform:scale(1) rotate(0);}}