第10章CSS3的動畫處理10.1關鍵幀@keyframes10.2過渡Transition10.3動畫Animation10.4動畫在頁面中的實際應用

CSS3提供了一系列方法和屬性，使我們能夠創建動畫，可以在許多網頁中取代動態圖片、Flash動畫以及JavaScript。

CSS3為動畫提供了兩個屬性：過渡(Transition)和動畫(Animation)；一個規則：關鍵幀(@keyframes)。它們三者之間的關系可以用圖10-1簡單地表示。

圖10-1Transition、Animation、@keyframes之間的關系

圖10-1所示是由5個關鍵幀(@keyframes)組成的動畫，兩個關鍵幀之間的過渡效果就是一個Trasition。整個動畫的全過程，就是一個Animation。為了方便理解，我們可以認為Trasition其實是Animation的一個子集，即一個Animation是由多個Transition組合而成的。

10.1關鍵幀@keyframes

我們知道，動畫其實是將事物的變化過程分解為許多動作瞬間的一系列靜止的圖片，以一定的速度連續展示，給視覺造成動態的藝術。實現由靜止到動態，主要是靠人眼的視覺殘留效應，而每張靜止的圖片，我們稱之為幀。

通過@keyframes，我們能夠創建動畫的關鍵幀。原理是將一套CSS樣式逐漸變化為另一套樣式，在動畫過程中能夠多次改變這套CSS樣式。基本語法如下：

參數說明如下：

●?animationname：定義動畫的名稱。

●?keyframes-selector：定義動畫時長的百分比。合法的值有0%～100%、from(與0%相同)、to(與100%)相同。

●?css-styles：一個或多個合法的CSS樣式屬性。

下面的代碼定義了一套動畫規則：規則名字為mymove，由5個關鍵幀組成，并移動4次最終回到起始位置。

規則定義的關鍵幀示意圖10-2所示。

圖10-2規則定義的關鍵幀示意圖

10.2過渡Transition

Trasition屬性提供了從一種狀態過渡到另一種狀態的漸變方案，通常在鼠標指針浮動到元素上時發生。基本語法如下：

非常明顯，這是一個簡寫屬性，用于設置4個過渡屬性：

●?transition-property：規定設置過渡效果的CSS屬性的名稱。

●?transition-duration：規定完成過渡效果需要多少秒或毫秒。

●?transition-timing-function：規定過渡效果的速度曲線。

●?transition-delay：規定過渡效果何時開始。

10.2.1transition-property

transition-property屬性規定設置過渡效果的CSS屬性的名稱。當指定的CSS屬性發生改變時，過渡效果將開始。它接收3種值：

●

none：沒有屬性會獲得過渡效果。

●

all：所有屬性都將獲得過渡效果，默認值。

●

property：定義應用過渡效果的CSS屬性名稱列表，列表以逗號分隔。

10.2.2transition-duration

transition-duration屬性規定完成過渡效果需要花費的時間，單位可以是秒(s)或毫秒(ms)。需要注意的是，這個屬性的默認值是0s，相當于不進行任何過渡轉變。因此，請記住每次都要設置transition-duration屬性。

10.2.3transition-timing-function

transition-timing-function屬性規定過渡效果的速度曲線，允許過渡效果隨著時間來改變其速度。允許的值有：

●?linear：勻速變化。

●?ease ：減速變化。

●?ease-in：加速變化。

●?ease-out：減速變化。

●?ease-in-out：先加速再減速變化。

具體速度變化可以參考圖10-3。

圖10-3transition-timing-function各參數速度曲線

10.3動畫Animation

通過圖10-1可知，動畫(Animation)實際上是由多個關鍵幀(keyframe)和過渡到這些關鍵幀的過渡(Transition)效果組合而成的。可以說，Animation就是Transition的升級效果，可通過設置多個節點來精確控制一個或一組動畫，常用來實現復雜的動畫效果。

定義一個動畫通常分為3步：

●

通過@keyframes定義動畫的關鍵幀，即將動畫劃分為不同的時間段。

●在各關鍵幀中分別定義各種CSS屬性。

●在指定元素里，通過animation屬性調用動畫。

animation屬性也是一個簡寫屬性，用于設置6個動畫屬性：

●?animation-name：規定需要綁定到選擇器的規則(@keyframes)名稱。

●?animation-duration：規定完成動畫所花費的時間。

●?animation-timing-function：規定動畫的速度曲線。

●?animation-delay：規定在動畫開始之前的延遲。

●?animation-iteration-count：規定動畫應該播放的次數。

●?animation-direction：規定是否應該輪流反向播放動畫。

10.3.1animation-name

animation-name屬性的值為@keyframes規則的名稱，也可以理解為該屬性的作用是設置動畫執行的規則。

10.3.2animation-duration

animation-duration屬性定義動畫完成一個周期(0%～100%)所需要的時間，值的單位可以是秒(s)或毫秒(ms)。與Transition一樣，這個屬性的默認值是0s，相當于不進行任何過渡轉變。因此，請記住每次都要設置animation-duration屬性。

10.3.3animation-timing-function

animation-timing-function屬性規定動畫的速度曲線，定義動畫從一套CSS樣式變為另一套所用的時間。速度曲線用于使變化更為平滑。其允許的值和Transition一樣：

●?linear：勻速變化。

●?ease：減速變化。

●?ease-in：加速變化。

●?ease-out：減速變化。

●?ease-in-out：先加速再減速變化。

具體速度變化可以參考圖10-3。

10.3.4animation-delay

animation-delay屬性定義動畫何時開始，值的單位可以是秒(s)或毫秒(ms)。此屬性允許負值，-2s表示使動畫馬上開始，但跳過動畫的前2秒。

10.3.5animation-iteration-count

animation-iteration-count屬性規定動畫的播放次數，接收的值有兩種：

●?n：具體的整數，即定義動畫播放次數的數值。

●?infinite：規定動畫無限次播放，即無限循環動畫。

10.3.6animation-direction

animation-direction屬性規定是否應該輪流反向播放動畫。它有兩個值可以選擇：

●?normal：動畫應該正常播放，默認值。

●?alternate：動畫應該輪流反向播放。

如果animation-direction值是“alternate”，則動畫會在奇數次數(1、3、5等)正常播放，而在偶數次數(2、4、6等)反向播放，即按照設置的路徑逆向返回初始值。需要注意的是，如果把動畫設置為只播放一次，則該屬性沒有效果。

10.3.7animation-play-state

animation-play-state屬性規定動畫正在運行還是暫停。可以在JavaScript或是某些偽類選擇器(如hover)中使用該屬性，這樣就能在播放過程中暫停動畫。

它有兩個值可以選擇：

●?paused：規定動畫暫停。

●?running：規定動畫播放。

10.3.8animation-fill-mode

animation-fill-mode屬性規定動畫在播放之前或之后，其動畫效果是否可見。此屬性的值是由逗號分隔的一個或多個填充模式關鍵詞，包括：

●

none：不改變默認行為。

●

forwards：當動畫完成后，保持最后一個屬性值(在最后一個關鍵幀中定義)。

●

backwards：在animation-delay所指定的一段時間內，在動畫顯示之前，應用開始屬性值(在第一個關鍵幀中定義)。

●

both：向前和向后填充模式都被應用。