第九章 CSS3動畫制作
1.CSS3變形transform
語法:transform:[transform-function] *;
設置變形函數，可以是一個，也可以是多個，中間以空格分開
2.變形函數
2.1 translate(tx,ty)：平移函數，基於X、Y坐標重新定位元素的位置
translateX（tx）:表示只設置X軸的位移
translateY（ty:表示只設置Y軸的位移
2.2 scale(tx,ty)：縮放函數，可以使任意元素對象尺寸發生變化
scaleX(sx)：表示只設置X軸的縮放
scaleY(sy)：表示只設置Y軸的縮放
2.3 rotate(a)：旋轉函數，取值是一個度數值
參數a單位使用deg表示
參數a取正值時元素相對原來中心順時針旋轉
2.4 skew(ax,ay)：傾斜函數，取值是一個度數值
skewX（ax）：表示只設置X軸的傾斜
skewY（ay）：表示只設置Y軸的傾斜
註意:rotate( )函數只是旋轉，而不會改變元素的形狀
skew( )函數是傾斜，元素不會旋轉，會改變元素的形狀

3.過渡transition
3.1 transition呈現的是一種過渡，是一種動畫轉換的過程，如漸現、漸弱、動畫快慢等
語法:transition:[transition-property transition-duration transition-timing-function transition-delay ]
3.2 過渡屬性（ transition-property ）
1)定義轉換動畫的CSS屬性名稱
2)取值
屬性名稱：指定的CSS屬性（width、height、background-color屬性等）
all：指定所有元素支持transition-property屬性的樣式，一般為了方便都會使用all
3.3 過渡所需的時間（ transition-duration ）
定義轉換動畫的時間長度，即從設置舊屬性到換新屬性所花費的時間，單位為秒（s）
3.4 過渡動畫函數（ transition-timing-function ）
1)指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，通過給過渡添加一個函數來指定動畫的快慢方式
2)取值
ease：速度由快到慢（默認值）
linear：速度恒速（勻速運動）
ease-in：速度越來越快（漸顯效果）
ease-out：速度越來越慢（漸隱效果）
ease-in-out：速度先加速再減速（漸顯漸隱效果）

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

3.6 過渡觸發的機制
1)偽類觸發
：hover
：active
：focus
：checked
2)媒體查詢：通過@media屬性判斷設備的尺寸，方向等
3)JavaScript觸發：用JavaScript腳本觸發

3.7 使用步驟
a.在默認樣式中聲明元素的初始狀態樣式
b.聲明過渡元素最終狀態樣式，如懸浮狀態
c.在默認樣式中通過添加過渡函數，添加一些不同的樣式

4. animation動畫
4.1 實現動畫的組成部分
a.通過類似Flash動畫的關鍵幀來聲明一個動畫
b.在animation屬性中調用關鍵幀聲明的動畫實現一個更為復雜的動畫效果
4.2 設置關鍵幀
語法一:
@keyframes name {
from {/*CSS樣式寫在這裏*/}
percentage {/*CSS樣式寫在這裏*/}
to {/*CSS樣式寫在這裏*/}
}
語法二:
@keyframes name {
0% {width:0;}
33% {width:23px;}
66% {width:46px;}
100% {width:69px;}
}
註意：寫兼容的時候瀏覽器前綴是放在@keyframes中間
例如：@-webkit-keyframes、@-moz- keyframes

4.3 調用關鍵幀
animation:animation-name animation–duration animation-timing-function
animation-delay animation-iteration-count animation-direction
animation-play-state animation-fill-mode;

animation-name：由@keyframes創建的動畫名稱
animation–duration：動畫時間
animation-timing-function：動畫方式
animation-delay：延遲時間
animation-iteration-count ：動畫的播放次數
animation-direction ：動畫的播放方向
animation-play-state ：動畫的播放狀態
animation-fill-mode：動畫開始之前和結束之後發生的操作
1）動畫的播放次數（animation-iteration-count）
a.值通常為整數，默認值為1
b.特殊值infinite，表示動畫無限次播放
2）動畫的播放方向（animation-direction）
a.normal，動畫每次都是循環向前播放
b.alternate，動畫播放為偶數次則向前播放
3）動畫的播放狀態（animation-play-state）
a.running將暫停的動畫重新播放
b.paused將正在播放的元素動畫停下來
4）動畫發生的操作（animation-fill-mode）
a.forwards表示動畫在結束後繼續應用最後關鍵幀的位置
b.backwards表示會在向元素應用動畫樣式時迅速應用動畫的初始幀
c.both表示元素動畫同時具有forwards和backwards的效果

2017.12.06html筆記10