（1）css3 keyframes介紹
keyframes被稱為關鍵幀，其類似於flash中的關鍵幀。在css3中其主要以「@keyframes」開頭，後面緊跟著是動畫名稱加上一對花括號「」，括號中就是一些不同時間段樣式規則。
@keyframes changecolor
100% }
在乙個「@keyframes」中的樣式規則可以由多個百分比構成的，如在「0%」到「100%」之間建立更多個百分比，分別給每個百分比中給需要有動畫效果的元素加上不同的樣式，從而達到一種在不斷變化的效果。
瀏覽器的支援情況：
chrome和safari需要字首-webkit-；foxfire需要字首-moz-。
（2）css3中呼叫動畫
animation-name屬性主要是用來呼叫@keyframes定義好的動畫。需要特別注意:animation-name 呼叫的動畫名需要和「@keyframes」定義的動畫名稱完全一致（區分大小寫），如果不一致將不具有任何動畫效果。
語法：animation-name:none | ident[,none|dent]*;
1、ident是由@keyframes建立的動畫名，上面已經講過了（animation-name 呼叫的動畫名需要和「@keyframes」定義的動畫名稱完全一致）；
2、none為預設值，當值為 none時，將沒有任何動畫效果,這可以用於覆蓋任何動畫。
注意：需要在 chrome 和 safari 上面的基礎上加上-webkit-字首，firefox加上-moz-。
語法規則：animation-duration: [,]*
取值為數值，單位為秒，其預設值為「0」，這意味著動畫週期為「0」，也就是沒有動畫效果（如果值為負值會被視為「0」）。
語法規則：
animation-timing-function: ease | linear |ease-in | ease-out | ease-in-out | cubic-bezier(, ,, ) [, ease | linear | ease-in | ease-out |ease-in-out | cubic-bezier(, , ,)]*
它和transition中的transition-timing-function一樣，具有以下幾種變換方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。對應函式功能如下：
語法規則：animation-delay:[,]*
語法規則：animation-iteration-count:infinite | [, infinite | ]*
注意：chrome或safari瀏覽器，需要加入-webkit-字首！
語法：animation-direction:normal| alternate [, normal | alternate]*
其主要有兩個值：normal、alternate
animation-direction:alternate;
注意：chrome或safari瀏覽器，需要加入-webkit-字首！
引數：
其主要有兩個值：running和paused。
（9）css3中設定動畫時間外屬性
animation-fill-mode屬性定義在動畫開始之前和結束之後發生的操作。主要具有四個屬性值：none、forwards、backwords和both。其四個屬性值對應效果如下：
屬性值
效果
none
預設值，表示動畫將按預期進行和結束，在動畫完成其最後一幀時，動畫會反轉到初始幀處
forwards
表示動畫在結束後繼續應用最後的關鍵幀的位置
backwards
會在向元素應用動畫樣式時迅速應用動畫的初始幀
both
元素動畫同時具有forwards和backwards效果
在預設情況之下，動畫不會影響它的關鍵幀之外的屬性，使用animation-fill-mode屬性可以修改動畫的預設行為。簡單的說就是告訴動畫在第一關鍵幀上等待動畫開始，或者在動畫結束時停在最後乙個關鍵幀上而不回到動畫的第一幀上。或者同時具有這兩個效果。
例如：讓動畫停在最一幀處。**如下：animation-fill-mode:forwards;
CSS3變形與動畫下
keyframes被稱為關鍵幀，其類似於flash中的關鍵幀。在css3中其主要以 keyframes 開頭，後面緊跟著是動畫名稱加上一對花括號 括號中就是一些不同時間段樣式規則。在乙個 keyframes 中的樣式規則可以由多個百分比構成的，如在 0 到 100 之間建立更多個百分比，分別給每個百...
第9章 CSS3中的變形與動畫（下）
keyframes被稱為關鍵幀，其類似於flash中的關鍵幀。在css3中其主要以 keyframes 開頭，後面緊跟著是動畫名稱加上一對花括號 括號中就是一些不同時間段樣式規則。keyframes changecolor 100 在乙個 keyframes 中的樣式規則可以由多個百分比構成的，如在...
CSS3中的變形與動畫
css3常見的動畫效果的實現，其實主要是靠transition和animation。而通常，這兩個又會和css3中的新屬性transform來搭配使用 那麼這三個東西其實是幹什麼用的呢？我按我自己的理解來下個簡單結論。transform 把元素變形 transition 元素的屬性變化時，給他乙個過...