keyframes具有其自己的語法規則，他的命名是由」@keyframes」開頭，後面緊接著是這個「動畫的名稱」加上一對花括號「{}」，括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。對於乙個」@keyframes」中的樣式規則是由多個百分比構成的，如「0%」到」100%」之間，我們可以在這個規則中建立多個百分比，我們分別給每乙個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動，改變元素顏色，位置，大小，形狀等，不過有一點需要注意的是，我們可以使用「fromt」「to」來代表乙個動畫是從哪開始，到哪結束，也就是說這個 「from」就相當於」0%」而」to」相當於」100%」,值得一說的是，其中」0%」不能像別的屬性取值一樣把百分比符號省略，我們在這裡必須加上百分符號（「%」）如果沒有加上的話，我們這個keyframes是無效的，不起任何作用。因為keyframes的單位只接受百分比值。
keyframes可以指定任何順序排列來決定animation動畫變化的關鍵位置。其具體語法規則如下：
css code複製內容到剪貼簿
keyframes-rule: '@keyframes' ident '';
keyframes-blocks: [ keyframe-selectors
block
]* ;
keyframe-selectors: [
'from'
| 'to'
| percentage ] [
','[
'from'
| 'to'
| percentage ] ]*;
把上面的語法綜合起來
css code複製內容到剪貼簿
@keyframes ident
percentage
to
} 或者全部寫成百分比的形式：
css code複製內容到剪貼簿
@keyframes ident
percentage
100%
} 其中ident是乙個動畫名稱，你可以隨便取，當然語義化一點更好，percentage是百分比值，我們可以新增許多個這樣的百分比，properties為css的屬性名，比如說left,background等，value就是相對應的屬性的屬性值。值得一提的是，我們from和to 分別對應的是0%和100%。這個我們在前面也提到過了。到目前為止支技animation動畫的只有webkit核心的瀏覽器，所以我需要在上面的基礎上加上-webkit字首，據說firefox5可以支援css3的 animation動畫屬性。
我們來看乙個例項:
css code複製內容到剪貼簿
@-webkit-keyframes 'test'
40%
60%
100%
} 這裡我們定義了乙個叫「test」的動畫，他的動畫是從0%開始到100%時結束，從中還經歷了乙個40%和60%兩個過程，上面**具體意思是：test動畫在0%時元素定位到left為100px的位置背景色為green，然後40%時元素過渡到left為150px的位置並且背景色為orange，60%時元素過渡到left為75px的位置,背景色為blue，最後100%結束動畫的位置元素又回到起點left為100px處,背景色變成red。假設定我們只給這個動畫有10s的執行時間，那麼他每一段執行的狀態如下圖所示：
keyframes定義好了以後，我們需要怎麼去呼叫剛才定義好的動畫「test」
css3的animation類似於transition屬性，他們都是隨著時間改變元素的屬性值。他們主要區別是transition需要觸發乙個事件(hover事件或click事件等)才會隨時間改變其css屬性；而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果。這樣我們就可以直接在乙個元素中呼叫animation的動畫屬性,基於這一點，css3的animation就需要明確的動畫屬性值，這也就是回到我們上面所說的，我們需要keyframes來定義不同時間的css屬性值,達到元素在不同時間段變化的效果。
下面我們來看看怎麼給乙個元素呼叫animation屬性
css code複製內容到剪貼簿
.demo1
css animation動畫效果將會影響元素相對應的css值，在整個動畫過程中，元素的變化屬性值完全是由animation來控制，動畫後面的會覆蓋前面的屬性值。如上面例子：因為我們這個demo只是在不同的時間段改變了demo1的背景色和左邊距，其預設值是：margin-left:100px;background: blue；但當我們在執行動畫0%時，margin-left:100px,background:green；當執行到40%時，屬性變成了：margin-left:150px;background:orange;當執行到60%時margin-left:75px;background:blue;當動畫 執行到100%時：margin-left:100px;background: red;此時動畫將完成，那麼margin-left和background兩個屬性值將是以100%時的為主,他不會產生疊加效果，只是一次一次覆蓋前一次出將的css屬性。就如我們平時的css一樣，最後出現的權根是最大的。當動畫結束後，樣式回到預設效果。
CSS3中的animation動畫
animation實現乙個屬性值得動畫 背景變換 滑鼠經過 總結 而他的幀集合也需要寫核心字首，就會有四個不同的 webkit keyfranmes moz keyfranmes ms keyfranmes o keyfranmes.然後，hover模式中每乙個帶著animation的屬性前也要加核...
css3中的animation詳解
它是乙個動畫復合屬性，有以下的屬性 animation name 動畫名稱 animation duration 動畫的持續時間 animation timing function 動畫的過渡型別，運動函式 animation delay 動畫延遲的時間 animation iteration co...
css3動畫 animation屬性
keyframes具有其自己的語法規則，他的命名是由 keyframes 開頭，後面緊接著是這個 動畫的名稱 加上一對花括號 括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。對於乙個 keyframes 中的樣式規則是由多個百分比構成的，如 0 到 100 之間，我們可以在這個規則...