《基于新信息技術(shù)的HTML5和CSS3網(wǎng)頁設(shè)計進(jìn)階教程》課件-第10章

第10章CSS3的動畫處理10.1關(guān)鍵幀@keyframes10.2過渡Transition10.3動畫Animation10.4動畫在頁面中的實際應(yīng)用

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

CSS3為動畫提供了兩個屬性：過渡(Transition)和動畫(Animation)；一個規(guī)則：關(guān)鍵幀(@keyframes)。它們?nèi)咧g的關(guān)系可以用圖10-1簡單地表示。

圖10-1Transition、Animation、@keyframes之間的關(guān)系

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

10.1關(guān)鍵幀@keyframes

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

通過@keyframes，我們能夠創(chuàng)建動畫的關(guān)鍵幀。原理是將一套CSS樣式逐漸變化為另一套樣式，在動畫過程中能夠多次改變這套CSS樣式?；菊Z法如下：

參數(shù)說明如下：

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

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

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

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

規(guī)則定義的關(guān)鍵幀示意圖10-2所示。

圖10-2規(guī)則定義的關(guān)鍵幀示意圖

10.2過渡Transition

Trasition屬性提供了從一種狀態(tài)過渡到另一種狀態(tài)的漸變方案，通常在鼠標(biāo)指針浮動到元素上時發(fā)生?；菊Z法如下：

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

●?transition-property：規(guī)定設(shè)置過渡效果的CSS屬性的名稱。

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

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

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

10.2.1transition-property

transition-property屬性規(guī)定設(shè)置過渡效果的CSS屬性的名稱。當(dāng)指定的CSS屬性發(fā)生改變時，過渡效果將開始。它接收3種值：

●

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

●

all：所有屬性都將獲得過渡效果，默認(rèn)值。

●

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

10.2.2transition-duration

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

10.2.3transition-timing-function

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

●?linear：勻速變化。

●?ease ：減速變化。

●?ease-in：加速變化。

●?ease-out：減速變化。

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

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

圖10-3transition-timing-function各參數(shù)速度曲線

10.3動畫Animation

通過圖10-1可知，動畫(Animation)實際上是由多個關(guān)鍵幀(keyframe)和過渡到這些關(guān)鍵幀的過渡(Transition)效果組合而成的?？梢哉f，Animation就是Transition的升級效果，可通過設(shè)置多個節(jié)點來精確控制一個或一組動畫，常用來實現(xiàn)復(fù)雜的動畫效果。

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

●

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

●在各關(guān)鍵幀中分別定義各種CSS屬性。

●在指定元素里，通過animation屬性調(diào)用動畫。

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

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

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

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

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

●?animation-iteration-count：規(guī)定動畫應(yīng)該播放的次數(shù)。

●?animation-direction：規(guī)定是否應(yīng)該輪流反向播放動畫。

10.3.1animation-name

animation-name屬性的值為@keyframes規(guī)則的名稱，也可以理解為該屬性的作用是設(shè)置動畫執(zhí)行的規(guī)則。

10.3.2animation-duration

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

10.3.3animation-timing-function

animation-timing-function屬性規(guī)定動畫的速度曲線，定義動畫從一套CSS樣式變?yōu)榱硪惶姿玫臅r間。速度曲線用于使變化更為平滑。其允許的值和Transition一樣：

●?linear：勻速變化。

●?ease：減速變化。

●?ease-in：加速變化。

●?ease-out：減速變化。

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

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

10.3.4animation-delay

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

10.3.5animation-iteration-count

animation-iteration-count屬性規(guī)定動畫的播放次數(shù)，接收的值有兩種：

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

●?infinite：規(guī)定動畫無限次播放，即無限循環(huán)動畫。

10.3.6animation-direction

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

●?normal：動畫應(yīng)該正常播放，默認(rèn)值。

●?alternate：動畫應(yīng)該輪流反向播放。

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

10.3.7animation-play-state

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

它有兩個值可以選擇：

●?paused：規(guī)定動畫暫停。

●?running：規(guī)定動畫播放。

10.3.8animation-fill-mode

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

●

none：不改變默認(rèn)行為。

●

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

●

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

●

both：向前和向后填充模式都被應(yīng)用。