1. 程式人生 > >第九章CSS3製作網頁動畫知識點

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