最近乙個小遊戲專案用到了css3的動畫屬性，例如transition、transform、animation。經過三個星期，終於做完了，利用週末好好梳理總結一下。
keyframes
這個屬性用來定義一系列關鍵幀。也就是在動畫執行的全過程中的乙個個中間點。
internet explorer 10、firefox 以及 opera 支援 @keyframes 規則和 animation 屬性。
chrome 和 safari 需要字首 -webkit-。
animation的屬性
animation 縮寫
animation: name duration timing-function delay iteration-count direction;一些重點難點的理解 animation-delay
這個屬性是規定動畫開始前等待幾秒才開始。本來是很好理解的，但是當時就有個疑問：假如我的動畫是連續執行好多次的情況下的話，是第一次執行前才會延遲還是每次執行前都會延遲呢？答案是：只有第一次會。
animation-fill-mode該屬性有四個值
none：預設值。不設定物件動畫之外的狀態
forwards：設定物件狀態為動畫結束時的狀態
backwards：設定物件狀態為動畫開始時的狀態
both：設定物件狀態為動畫結束或開始的狀態
一開始比較糾結著三個到底有什麼區別。網上也找了，發現網上說的有點錯誤。起碼我試了一下forwards和both的效果是一模一樣的。都是動畫執行完了停在**就是**。至於backwards，就是總停在一開始的狀態。
兩段**主要說明在forwards和both的情況下動畫在設定了反向執行偶次數時，效果仍然一樣。因為之前看到網上說的是forwards在偶次數反向是會停在關鍵幀的100%處，而不是0%處。
iteration-count
執行次數。
這個本來沒什麼好說的，一目了然，但是無意中發現，有以下的特殊情況：
不能為負數
可以為0為0的時候，按1來算
可以為小數小數的時候，不會取整。而是多少就執行多少，比如 .5 就執行到50%的位置。
事件
在動畫的世界裡，總有這樣的需求，就是某個動畫結束了之後才進行下乙個動畫，這個時候就要知道上乙個動畫是什麼時候結束的了。雖然可以用settimeout來計時達到差不多的效果，但是總感覺不夠精確。
還好，css3的動畫有js事件。
開始：animationstart
迭代：animationiteration
結束：animationend
從**可以看出，iteration是在動畫重複執行的時候觸發的。
CSS 動畫 3D翻頁動畫
doctype html html lang en head meta charset utf 8 meta name viewport content width device width,initial scale 1.0 title create effect of 3d title styl...
css3動畫和js動畫
css3動畫 animation 是個簡寫屬性，用於設定六個動畫屬性。注意必須規定animation duration屬性，否則時長為0 animation timing function規定動畫速度曲線 alternate 動畫應該輪流反向 transtion 過度屬性 預設 all 0 ease...
C3動畫 animation動畫庫
css3中的動畫分為 平移動畫 過渡動畫和自定義動畫三種。可以在這個規則中建立多個百分比，分別在每乙個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動 改變元素顏色 位置 大小 形狀等。數值段必須是百分數，如果不是百分數，這個keyframes是無效的，不...