css3 animation 的基礎認識.

標籤：style   blog   http   color   使用   io   strong   for   

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);}}