使用HTML語言和CSS開發商業站點_利用CSS3製作網頁動畫
阿新 • • 發佈：2019-02-12
第9章 利用CSS3製作網頁動畫
一.CSS3變形
1.變形簡介
CSS3變形是一些效果的集合，如平移，旋轉，縮放，傾斜效果，每個效果都可以稱為變形（transform），它們可以操控元素髮生平移，旋轉，縮放，傾斜等 變化。
語法：transform:[transform-function]*;
設定變形函式，可以是一個，也可以是多個，中間以空格分開。
translate（）:平移函式，基於X，Y座標重新定義元素的位置。
scale（）：縮放函式，可以使任意元素物件尺寸發生變化。
rotate（）：旋轉函式，取值是一個度數值。
skew（）：傾斜函式，取值是一個度數值。
CSS3 3D變形函式：translated3d()平移函式，scale3d()的縮放函式，rotate3d()旋轉函式。
2.瀏覽器相容性
具體哪個瀏覽器版本支援什麼樣的CSS屬性，看http：//www.caniuse.com;
3.2D變形
（1）.2D位移
translate(tx,ty);
注意：當translate（）函式只有一個值的時候，則表示水平位移；如果只設置垂直位移；就必須設定第一個引數為0，第二個值是垂直偏移量。
其它形式：translateX（tx）：
translatex（tx）：/*大小寫都可以 Y軸也是同樣的道理*/
（2）.2D縮放
scale（）函式能夠用來縮放元素大小，該函式包含兩個引數值，預設值為1.只有一個值時，第二個預設值和第一個相等。
語法：scale（sx，sy）或scale（sx）
scaleX（sx）：
scalex（sx）：/*大小寫都可以 Y軸也是同樣的道理*/
（3）.2D傾斜
語法：skew（ax，ay）或skew（ax）
（4）.2D旋轉
rotate（）函式能夠讓元素在二維空間裡繞著一個指定的角度旋轉1，這個元素物件可以是行內元素也可以是塊元素。
語法：rotate（a）；/*a的取值為正值，元素相對原來中心順時針旋轉......*/
rotate（）函式只是旋轉，而不會改變元素的形狀。skew（）函式是傾斜，元素不會旋轉，會改變元素的形狀。
二.CSS3過渡
CSS3中過渡（transition）和animations兩種方法都可以實現動畫互動效果。
1.過渡簡介
transform呈現的是一種變形的結果，而transition呈現的是一種過渡，是一種動畫轉換的過程，如漸現，漸弱，動畫快慢等。CSS3 transition的過渡功能更像是一種“黃油”，通過一些CSS的簡單動作觸發樣式平滑過渡。
2.過渡屬性的使用
語法：transition:[transition-property transition-duration transition-timing-function transition-delay]*
transition-property:指定過渡或動態模擬的CSS屬性。
transition-duration:指定完成過渡所需要的時間。
transiton-timing-function:指定過渡函式。
transiton-delay:指定過渡開始出現的延遲時間。（四個屬性之間以空格分隔）
（1）過渡屬性
transition-property屬性用來定義轉換動畫的CSS屬性名稱，常用屬性：
IDENT：指定的CSS屬性（width，height，background-color屬性等）
all：指定所有元素支援transition-property屬性的樣式，一般為了方便都會使用all。
（2）過渡所需的時間
transition-duration屬性用來定義轉換動畫的時間長度，即從設定從舊屬性到新屬性所花費的時間，單位為s。
（3）過渡動畫函式
transition-timing-function屬性用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況。
ease：元素樣式從初始狀態過渡到終止狀態時速度由快到慢，逐漸變慢（預設值）。
linear：元素樣式從初始狀態過渡到終止狀態時速度恆速（勻速）。
ease-in：元素樣式從初始狀態過渡到終止狀態時速度越來越快（漸顯效果）。
ease-out：元素樣式從初始狀態過渡到終止狀態時速度越來越慢（漸隱效果）。
ease-in-out：元素樣式從初始狀態過渡到終止狀態時速度先加速再減速（漸顯漸隱效果）。
（4）過渡延遲時間
正值：元素過渡效果不會立即觸發，當過了設定的時間值後才會被觸發。
負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷。
0：預設值，元素過渡效果立即執行。
3.過渡的觸發機制
偽類觸發：：hover，：active，：focus，：checked等
媒體查詢：可以通過@media屬性判斷裝置的尺寸，方向等。
JavaScript觸發：用JavaScript指令碼觸發。
使用transition實現過渡動畫的使用步驟
（1）在預設樣式中宣告元素的初始狀態樣式
（2）宣告過渡元素最終樣式狀態，如懸浮狀態
（3）在預設樣式中通過新增過渡函式，新增一些不同的樣式。
三.CSS3動畫
1.CSS3動畫簡介
transition和animation在實現動畫的方式上的區別
（1）transition屬性通過指定屬性的初始狀態和結束狀態在兩個狀態之間進行平滑過渡的方式來實現動畫。
（2）animation實現動畫主要由兩個部分組成
通過類似Flash動畫的關鍵幀來宣告一個動畫。
在animation屬性中呼叫關鍵幀宣告的動畫實現一個更為複雜的動畫效果。
2.CSS3動畫的使用過程
使用animation製作動畫的步驟：
（1）通過關鍵幀（@keyframes）來宣告一個動畫。
（2）找到要設定動畫的元素，並且呼叫關鍵幀宣告的動畫。
（1）設定關鍵幀
語法：@keyframes IDNET{
from{/*CSS樣式寫在這裡*/}
percentage{/*CSS樣式寫在這裡*/}
to{/*CSS樣式寫在這裡*/}
}
也可以將關鍵詞from和to換成百分比，即：
@keyframes IDNET{
0%{/*CSS樣式寫在這裡*/}
percentage{/*CSS樣式寫在這裡*/}
100%{/*CSS樣式寫在這裡*/}
}
其中IDNET就是一個動畫名稱，percentage就是一個百分比，用來定義某個時間段的動畫效果。
（2）呼叫關鍵幀
animation和transition的區別：
（1）transition實現動畫需要觸發一個事件（hover事件，active事件等）。
（2）animation可以在不觸發任何事件的情況下也能隨著時間的變化來改變元素的CSS屬性值，
從而達到一種動畫的效果。
語法：animation：animation-name animation-duration animation-timing-function animation-delay
animation-iteration-count animation-direction animation-play-state
animation-fill-mode;
速記公式：動畫名稱 動畫的播放時間 動畫的播放方式 開始播放動畫的時間 動畫的播放次數（
特殊值infinite，表示動畫無限次播放） 動畫的播放次數 動畫的播放方向
（normal表示動畫每次都是迴圈向前播放，alternate表示動畫播放為偶數次則向前
播放，奇數次則向反方向播放） 動畫的播放狀態（paused將正在播放的動畫停
下來，running將暫停的動畫重新播放） 動畫的時間外屬性（定義在動畫開始之前和結束
之後發生的操作。其取值為forwards表示動畫在結束後繼續應用最後關鍵幀
的位置，取值為backwards表示會在向元素應用動畫樣式時迅速應用動畫的初始幀，取值
為both表示元素動畫同時具有forwords和backwards的效果） 。
一.CSS3變形
1.變形簡介
CSS3變形是一些效果的集合，如平移，旋轉，縮放，傾斜效果，每個效果都可以稱為變形（transform），它們可以操控元素髮生平移，旋轉，縮放，傾斜等 變化。
語法：transform:[transform-function]*;
設定變形函式，可以是一個，也可以是多個，中間以空格分開。
translate（）:平移函式，基於X，Y座標重新定義元素的位置。
scale（）：縮放函式，可以使任意元素物件尺寸發生變化。
rotate（）：旋轉函式，取值是一個度數值。
skew（）：傾斜函式，取值是一個度數值。
CSS3 3D變形函式：translated3d()平移函式，scale3d()的縮放函式，rotate3d()旋轉函式。
2.瀏覽器相容性
具體哪個瀏覽器版本支援什麼樣的CSS屬性，看http：//www.caniuse.com;
3.2D變形
（1）.2D位移
translate(tx,ty);
注意：當translate（）函式只有一個值的時候，則表示水平位移；如果只設置垂直位移；就必須設定第一個引數為0，第二個值是垂直偏移量。
其它形式：translateX（tx）：
translatex（tx）：/*大小寫都可以 Y軸也是同樣的道理*/
（2）.2D縮放
scale（）函式能夠用來縮放元素大小，該函式包含兩個引數值，預設值為1.只有一個值時，第二個預設值和第一個相等。
語法：scale（sx，sy）或scale（sx）
scaleX（sx）：
scalex（sx）：/*大小寫都可以 Y軸也是同樣的道理*/
（3）.2D傾斜
語法：skew（ax，ay）或skew（ax）
（4）.2D旋轉
rotate（）函式能夠讓元素在二維空間裡繞著一個指定的角度旋轉1，這個元素物件可以是行內元素也可以是塊元素。
語法：rotate（a）；/*a的取值為正值，元素相對原來中心順時針旋轉......*/
rotate（）函式只是旋轉，而不會改變元素的形狀。skew（）函式是傾斜，元素不會旋轉，會改變元素的形狀。
二.CSS3過渡
CSS3中過渡（transition）和animations兩種方法都可以實現動畫互動效果。
1.過渡簡介
transform呈現的是一種變形的結果，而transition呈現的是一種過渡，是一種動畫轉換的過程，如漸現，漸弱，動畫快慢等。CSS3 transition的過渡功能更像是一種“黃油”，通過一些CSS的簡單動作觸發樣式平滑過渡。
2.過渡屬性的使用
語法：transition:[transition-property transition-duration transition-timing-function transition-delay]*
transition-property:指定過渡或動態模擬的CSS屬性。
transition-duration:指定完成過渡所需要的時間。
transiton-timing-function:指定過渡函式。
transiton-delay:指定過渡開始出現的延遲時間。（四個屬性之間以空格分隔）
（1）過渡屬性
transition-property屬性用來定義轉換動畫的CSS屬性名稱，常用屬性：
IDENT：指定的CSS屬性（width，height，background-color屬性等）
all：指定所有元素支援transition-property屬性的樣式，一般為了方便都會使用all。
（2）過渡所需的時間
transition-duration屬性用來定義轉換動畫的時間長度，即從設定從舊屬性到新屬性所花費的時間，單位為s。
（3）過渡動畫函式
transition-timing-function屬性用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況。
ease：元素樣式從初始狀態過渡到終止狀態時速度由快到慢，逐漸變慢（預設值）。
linear：元素樣式從初始狀態過渡到終止狀態時速度恆速（勻速）。
ease-in：元素樣式從初始狀態過渡到終止狀態時速度越來越快（漸顯效果）。
ease-out：元素樣式從初始狀態過渡到終止狀態時速度越來越慢（漸隱效果）。
ease-in-out：元素樣式從初始狀態過渡到終止狀態時速度先加速再減速（漸顯漸隱效果）。
（4）過渡延遲時間
正值：元素過渡效果不會立即觸發，當過了設定的時間值後才會被觸發。
負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷。
0：預設值，元素過渡效果立即執行。
3.過渡的觸發機制
偽類觸發：：hover，：active，：focus，：checked等
媒體查詢：可以通過@media屬性判斷裝置的尺寸，方向等。
JavaScript觸發：用JavaScript指令碼觸發。
使用transition實現過渡動畫的使用步驟
（1）在預設樣式中宣告元素的初始狀態樣式
（2）宣告過渡元素最終樣式狀態，如懸浮狀態
（3）在預設樣式中通過新增過渡函式，新增一些不同的樣式。
三.CSS3動畫
1.CSS3動畫簡介
transition和animation在實現動畫的方式上的區別
（1）transition屬性通過指定屬性的初始狀態和結束狀態在兩個狀態之間進行平滑過渡的方式來實現動畫。
（2）animation實現動畫主要由兩個部分組成
通過類似Flash動畫的關鍵幀來宣告一個動畫。
在animation屬性中呼叫關鍵幀宣告的動畫實現一個更為複雜的動畫效果。
2.CSS3動畫的使用過程
使用animation製作動畫的步驟：
（1）通過關鍵幀（@keyframes）來宣告一個動畫。
（2）找到要設定動畫的元素，並且呼叫關鍵幀宣告的動畫。
（1）設定關鍵幀
語法：@keyframes IDNET{
from{/*CSS樣式寫在這裡*/}
percentage{/*CSS樣式寫在這裡*/}
to{/*CSS樣式寫在這裡*/}
}
也可以將關鍵詞from和to換成百分比，即：
@keyframes IDNET{
0%{/*CSS樣式寫在這裡*/}
percentage{/*CSS樣式寫在這裡*/}
100%{/*CSS樣式寫在這裡*/}
}
其中IDNET就是一個動畫名稱，percentage就是一個百分比，用來定義某個時間段的動畫效果。
（2）呼叫關鍵幀
animation和transition的區別：
（1）transition實現動畫需要觸發一個事件（hover事件，active事件等）。
（2）animation可以在不觸發任何事件的情況下也能隨著時間的變化來改變元素的CSS屬性值，
從而達到一種動畫的效果。
語法：animation：animation-name animation-duration animation-timing-function animation-delay
animation-iteration-count animation-direction animation-play-state
animation-fill-mode;
速記公式：動畫名稱 動畫的播放時間 動畫的播放方式 開始播放動畫的時間 動畫的播放次數（
特殊值infinite，表示動畫無限次播放） 動畫的播放次數 動畫的播放方向
（normal表示動畫每次都是迴圈向前播放，alternate表示動畫播放為偶數次則向前
播放，奇數次則向反方向播放） 動畫的播放狀態（paused將正在播放的動畫停
下來，running將暫停的動畫重新播放） 動畫的時間外屬性（定義在動畫開始之前和結束
之後發生的操作。其取值為forwards表示動畫在結束後繼續應用最後關鍵幀
的位置，取值為backwards表示會在向元素應用動畫樣式時迅速應用動畫的初始幀，取值
為both表示元素動畫同時具有forwords和backwards的效果） 。