HTML5和CSS3開發第九章知識點

變形函式
translate()：平移函式，基於X、Y座標重新定位元素的位置
scale()：縮放函式，可以使任意元素物件尺寸發生變化
rotate()：旋轉函式，取值是一個度數值

skew()：傾斜函式，取值是一個度數值

transition呈現的是一種過渡，是一種動畫轉換的過程，如漸現、漸弱、動畫快慢等

CSS3 transition的過渡功能更像是一種“黃油”，通過一些CSS的簡單動作觸發樣式平滑過渡

過渡屬性（ transition-property ）
定義轉換動畫的CSS屬性名稱
IDENT：指定的CSS屬性（width、height、background-color屬性等）

all：指定所有元素支援transition-property屬性的樣式，一般為了方便都會使用all

過渡所需的時間（ transition-duration ）

定義轉換動畫的時間長度，即從設定舊屬性到換新屬性所花費的時間，單位為秒（s）

過渡動畫函式（ transition-timing-function ）
指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，通過給過渡新增一個函式來指定動畫的快慢方式
ease：速度由快到慢（預設值）
linear：速度恆速（勻速運動）
ease-in：速度越來越快（漸顯效果）
ease-out：速度越來越慢（漸隱效果）

ease-in-out：速度先加速再減速（漸顯漸隱效果）

過渡延遲時間（ transition-delay ）
指定一個動畫開始執行的時間，當改變元素屬性值後多長時間去執行過渡效果
正值：元素過渡效果不會立即觸發，當過了設定的時間值後才會被觸發
負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷

0：預設值，元素過渡效果立即執行

偽類觸發
：hover
：active
：focus
：checked

媒體查詢：通過@media屬性判斷裝置的尺寸，方向等

JavaScript觸發：用JavaScript指令碼觸發

animation動畫簡介
animation實現動畫主要由兩個部分組成
通過類似Flash動畫的關鍵幀來宣告一個動畫

在animation屬性中呼叫關鍵幀宣告的動畫實現一個更為複雜的動畫效果

設定關鍵幀:@keyframes

呼叫關鍵幀:animation:animation-name  animation–duration  animation-timing-function
   animation-delay  animation-iteration-count  animation-direction  

animation-play-state  animation-fill-mode;

動畫的播放次數（animation-iteration-count）
值通常為整數，預設值為1
特殊值infinite，表示動畫無限次播放
動畫的播放方向（animation-direction）
normal，動畫每次都是迴圈向前播放
alternate，動畫播放為偶數次則向前播放
動畫的播放狀態（animation-play-state）
running將暫停的動畫重新播放

paused將正在播放的元素動畫停下來

動畫發生的操作（animation-fill-mode）
forwards表示動畫在結束後繼續應用最後關鍵幀的位置
backwards表示會在向元素應用動畫樣式時迅速應用動畫的初始幀

both表示元素動畫同時具有forwards和backwards的效果