第九章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的效果