CSS3學習手記（11） 動畫

標籤：應用   建立   run   state   屬性   文法   類型   play   roi   

CSS3 動畫

使元素從一種樣式逐漸層化為另一種樣式的效果

相容性

IE10、FireFox16+ Chrome43+ Safari9+ OPera30+ Android(-webkit-)

 

animation

 

animation-name屬相檢索或設定所應用的動畫名稱

文法

animation-name:keyframename|none

參數說明

keyframename 指定要綁定到選取器的主要畫面格的名稱

none:指定有沒有動畫

 

animation-duration屬性檢索或設定對象動畫的期間

文法

animation-duration:time

參數說明

time指定動畫播放完成花費的時間。預設是0 意味著沒有動畫效果

 

animation-timing-function 檢索或設定動畫的過渡類型

 

animation-delay屬性檢索或設定動畫的延遲時間

文法

animation-delay:time

參數說明

可選。定義動畫開始前等待的時間，以秒或毫秒計，預設是0

 

animation-iteration-count屬性檢索或設定對象動畫的迴圈次數

文法

animation-iteration-count:infinite|<number>

參數說明

<number>為數字，預設是1 infinite為無限次迴圈

 

animation-direction屬性檢索或設定對象動畫在迴圈中是否反向運動

文法

animation-direction:normal|reverse|alternate|alternate-reverse|initial|inhert

參數說明

• normal  正常方向
• reverse  反向運行
• alternate   動畫先正常運行在反向運行，並持續交替運行
• alternate-reverse 動畫先反方向在正方向運行，並持續交替運行

 

animation-fill-mode屬性

規定當動畫不播放時（當動畫完成或當動畫有延遲未開始播放時），要應用到元素樣式

文法

animation-fill-mode:none|forwards|backwards|both|initial|inherit

參數說明

• none  預設值 不設定對象動畫之外的狀態
• forwards  設定對象狀態為動畫介紹的狀態
• backwards 設定對象狀態為動畫開始的狀態
• both  設定對象狀態為動畫結束或開始的狀態

 

animation-play-state屬性指定動畫是否運行或已暫停

文法

animation-play-state:paused|running

參數說明

• paused  指定暫停動畫
• running  預設值，指定正在運行動畫

 

 

 

keyframes 主要畫面格

指定任何順序排列來決定Animation動畫變化的關鍵位置

使用說明

使用@keyframes規則建立動畫，通過逐漸改變一個css樣式設定到另一個。在動畫過程中可以通過@keyframes規則多次更改css樣式的設定

文法

@keyframes animationname{

keyframes-selector{

css-styles;

}

}

參數說明

• animationname  必寫項，定義animation名稱
• keyframes-selector  必寫項，動畫期間百分比 
• css-styles  必寫項，一個或多個合法的css樣式屬性

 

CSS3學習手記（11） 動畫