第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的效果） 。

總結

以上是生活随笔為你收集整理的使用HTML语言和CSS开发商业站点_利用CSS3制作网页动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。