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

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

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

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

CSS3提供了一系列方法和屬性，使我們能夠創(chuàng)建動(dòng)畫，可圖10-1Transition、Animation、@keyframes之間的關(guān)系圖10-1Transition、Animation、@k

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

圖10-1所示是由5個(gè)關(guān)鍵幀(@keyframes)組

10.1關(guān)鍵幀@keyframes

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

10.1關(guān)鍵幀@keyframes

我們知道，動(dòng)

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

通過@keyframes，我們能夠創(chuàng)建動(dòng)畫的關(guān)鍵幀。原

參數(shù)說明如下：

●?animationname：定義動(dòng)畫的名稱。

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

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

參數(shù)說明如下：

●?animationname：

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

下面的代碼定義了一套動(dòng)畫規(guī)則：規(guī)則名字為mymove，

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

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

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

圖10-2規(guī)

10.2過渡Transition

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

10.2過渡Transition

Trasiti

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

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

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

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

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

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

10.2.1transition-property

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

●

none：沒有屬性會(huì)獲得過渡效果。

●

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

●

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

10.2.1transition-property

10.2.2transition-duration

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

10.2.2transition-duration

10.2.3transition-timing-function

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

●?linear：勻速變化。

●?ease ：減速變化。

●?ease-in：加速變化。

●?ease-out：減速變化。

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

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

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

10.3動(dòng)畫Animation

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

10.3動(dòng)畫Animation

通過圖10-1可

定義一個(gè)動(dòng)畫通常分為3步：

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

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

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

定義一個(gè)動(dòng)畫通常分為3步：

●通過@keyfra

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

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

●?animation-duration：規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間。

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

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

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

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

animation屬性也是一個(gè)簡寫屬性，用于設(shè)置6個(gè)動(dòng)

10.3.1animation-name

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

10.3.2animation-duration

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

10.3.1animation-name

anim

10.3.3animation-timing-function

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

●?linear：勻速變化。

●?ease：減速變化。

●?ease-in：加速變化。

●?ease-out：減速變化。

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

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

10.3.3animation-timing-func

10.3.4animation-delay

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

10.3.5animation-iteration-count

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

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

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

10.3.4animation-delay

ani

10.3.6animation-direction

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

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

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

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

10.3.6animation-direction

10.3.7animation-play-state

animation-play-state屬性規(guī)定動(dòng)畫正在運(yùn)行還是暫停?？梢栽贘avaScript或是某些偽類選擇器(如hover)中使用該屬性，這樣就能在播放過程中暫停動(dòng)畫。

它有兩個(gè)值可以選擇：

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

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

10.3.7animation-play-state

10.3.8animation-fill-mode

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

●

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

●

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

●

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

●

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

10.3.8animation-fill-mode

10.4動(dòng)畫在頁面中的實(shí)際應(yīng)用

動(dòng)畫效果在頁面中能極大地提升用戶體驗(yàn)度，給用戶一種酷炫的感覺。而用戶體驗(yàn)才是前端工程師應(yīng)該更加關(guān)注的問題。動(dòng)畫效果一般和CSS3變形處理一起使用，接下來以第9章整體3D轉(zhuǎn)換的示例為基礎(chǔ)添加動(dòng)畫效果，讓整個(gè)圖形3D旋轉(zhuǎn)，得到更加酷炫的效果。

10.4動(dòng)畫在頁面中的實(shí)際應(yīng)用

動(dòng)畫效果在頁面中

代碼參考9.3節(jié)中的代碼，頁面實(shí)際顯示效果如圖10-4所示。

圖10-4應(yīng)用3D轉(zhuǎn)換效果的頁面

代碼參考9.3節(jié)中的代碼，頁面實(shí)際顯示效果如圖10-4基于新信息技術(shù)的HTML5和CSS3網(wǎng)頁設(shè)計(jì)進(jìn)階教程第10章課件感謝感謝28謝謝，精品課件資料搜集謝謝，精品課件資料搜集29第10章CSS3的動(dòng)畫處理10.1關(guān)鍵幀@keyframes10.2過渡Transition10.3動(dòng)畫Animation10.4動(dòng)畫在頁面中的實(shí)際應(yīng)用第10章CSS3的動(dòng)畫處理10.1關(guān)鍵幀@keyfr

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

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

CSS3提供了一系列方法和屬性，使我們能夠創(chuàng)建動(dòng)畫，可圖10-1Transition、Animation、@keyframes之間的關(guān)系圖10-1Transition、Animation、@k

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

圖10-1所示是由5個(gè)關(guān)鍵幀(@keyframes)組

10.1關(guān)鍵幀@keyframes

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

10.1關(guān)鍵幀@keyframes

我們知道，動(dòng)

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

通過@keyframes，我們能夠創(chuàng)建動(dòng)畫的關(guān)鍵幀。原

參數(shù)說明如下：

●?animationname：定義動(dòng)畫的名稱。

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

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

參數(shù)說明如下：

●?animationname：

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

下面的代碼定義了一套動(dòng)畫規(guī)則：規(guī)則名字為mymove，

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

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

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

圖10-2規(guī)

10.2過渡Transition

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

10.2過渡Transition

Trasiti

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

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

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

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

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

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

10.2.1transition-property

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

●

none：沒有屬性會(huì)獲得過渡效果。

●

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

●

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

10.2.1transition-property

10.2.2transition-duration

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

10.2.2transition-duration

10.2.3transition-timing-function

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

●?linear：勻速變化。

●?ease ：減速變化。

●?ease-in：加速變化。

●?ease-out：減速變化。

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

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

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

10.3動(dòng)畫Animation

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

10.3動(dòng)畫Animation

通過圖10-1可

定義一個(gè)動(dòng)畫通常分為3步：

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

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

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

定義一個(gè)動(dòng)畫通常分為3步：

●通過@keyfra

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

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

●?animation-duration：規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間。

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

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

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

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

animation屬性也是一個(gè)簡寫屬性，用于設(shè)置6個(gè)動(dòng)

10.3.1animation-name

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

10.3.2animation-duration

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

10.3.1animation-name

anim

10.3.3animation-timing-function

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

●?linear：勻速變化。

●?ease：減速變化。

●?ease-in：加速變化。

●?ease-out：減速變化。

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

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

10.3.3animation-timing-func

10.3.4animation-delay

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

10.3.5animation-iteration-count

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

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

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

10.3.4animation-delay

ani

10.3.6animation-direction

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

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

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

如果animation-direction值是“al