CSS3變形與動畫下

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

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

經驗與技巧：

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

-moz-

。

@keyframes changecolor
100%
}

@keyframes changecolor 100% }div div:hover

animation-name屬性

主要是用來呼叫

@keyframes

定義好的動畫。需要特別注意: animation-name 呼叫的

動畫名需要和「@keyframes」

定義的動畫名稱

完全一致（

區分大小寫

），如果不一致將不具有任何動畫效果。

none為預設值，當值為 none 時，將沒有任何動畫效果,這可以用於覆蓋任何動畫。

注意：需要在 chrome 和 safari 上面的基礎上加上-webkit-字首，firefox加上-moz-。

@keyframes around
100%
}div span

完成從0%到100%一次動畫所需時間

。單位：s秒

animation-duration: 5s;

animation-timing-function屬性主要用來設

它和transition中的transition-timing-function一樣，具有以下幾種變換方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。對應功如下：

屬性主要用來定義動畫的

其值通常為整數

如果取值為infinite

animation-direction屬性主要用來設定

其語法規則如下：

其主要有兩個值：normal、alternate

animation-direction:alternate;

注意：chrome或safari瀏覽器，需要加入-webkit-字首！引數：其主要有兩個值：running和paused。

animation-play-state:paused;

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

屬性值

效果

none

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

forwards

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

backwards

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

both

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

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

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

animation-fill-mode:forwards;

CSS3變形與動畫下

CSS3中的變形與動畫（下）

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

CSS3變形與動畫上

CSS3變形與動畫下

CSS3中的變形與動畫（下）

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

CSS3變形與動畫上

相關推薦