第9章 CSS3中的變形與動畫（下）

keyframes被稱為關鍵幀，其類似於flash中的關鍵幀。在css3中其主要以「@keyframes」開頭，後面緊跟著是動畫名稱加上一對花括號「」，括號中就是一些不同時間段樣式規則。

@keyframes changecolor
100%
}

在乙個「@keyframes」中的樣式規則可以由多個百分比構成的，如在「0%」到「100%」之間建立更多個百分比，分別給每個百分比中給需要有動畫效果的元素加上不同的樣式，從而達到一種在不斷變化的效果。

chrome 和 safari 需要字首 -webkit-；foxfire 需要字首 -moz-。

案例演示

通過「@keyframes」宣告乙個名叫「wobble」的動畫，從「0%」開始到「100%」結束，同時還經歷了乙個「40%」和「60%」兩個過程。「wobble」動畫在「0%」時元素定位到left為100px，背景色為green，然後在「40%」時元素過渡到left為150px,背景色為orange,接著在「60%」時元素過渡到left為75px，背景色為blue，最後「100%」時結束動畫，元素又回到起點left為100px處，背景色變為red。

html:

滑鼠放到我身上 css: @keyframes wobble 40% 60% 100% }div

div:hover

呼叫動畫

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-。

@keyframes around 25%50% 75%100% }div

div span

animation-duration: [,]*

取值為數值，單位為秒，其預設值為「0」，這意味著動畫週期為「0」，也就是沒有動畫效果（如果值為負值會被視為「0」）。

@keyframes move 15%30% 45%60% 75%90% 100% }div span

div:hover span

設定動畫時間外屬性

animation-fill-mode屬性定義在動畫開始之前和結束之後發生的操作。主要具有四個屬性值：none、forwards、backwords和both。其四個屬性值對應效果如下：

屬性值效果

none

預設值，表示動畫將按預期進行和結束，在動畫完成其最後一幀時，動畫會反轉到初始幀處

forwards

表示動畫在結束後繼續應用最後的關鍵幀的位置

backwards

會在向元素應用動畫樣式時迅速應用動畫的初始幀

both

元素動畫同時具有forwards和backwards效果

在預設情況之下，動畫不會影響它的關鍵幀之外的屬性，使用animation-fill-mode屬性可以修改動畫的預設行為。簡單的說就是告訴動畫在第一關鍵幀上等待動畫開始，或者在動畫結束時停在最後乙個關鍵幀上而不回到動畫的第一幀上。或者同時具有這兩個效果。

例如：讓動畫停在最一幀處。**如下：

animation-fill-mode:forwards;

第9章 CSS3中的變形與動畫（下）

CSS3變形與動畫下

CSS3中的變形與動畫（下）

CSS3中的變形與動畫

相關推薦