必須掌握的CSS3動畫（Animation）的8大屬性

animation複合屬性。檢索或設定物件所套用的動畫特效。

如果有多個屬性值時以"，"隔開，適用於所有元素，包含偽物件:after和:before

1.animation-name  檢索或設定物件所套用的動畫名稱

  必須與規則@keyframes搭配使用， eg:@k​​eyframes animations  animation-name:animations;

2.animation-duration  檢索或設定物件動畫的持續時間

  animation-du:3s;  ration  動畫完成完成使用的時間為3s

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

  linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

  ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

  ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)

  ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)

  ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

  step-start：等同於steps(1, start)

  step-end：等同於steps(1, end )

  steps(integer>[, [ start | end ] ]?)：接受兩個參數的步進函數。第一個參數必須為正整數，指定函數的步數。第二個參數取值可以是start或end，指定每個步驟的值發生變化的時間點。第二個參數是可選的，預設值為end。

  cubic-bezier(, , , )：特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內

4.animation-delay  檢索或設定物件動畫延遲的時間

##  animation-delay:0.5s;     動畫開始前延遲的時間為0.5s

5.animation-iteration-count  檢索或設定物件動畫的#次數##  animation -iteration-count: infinite | number;

  infinite：無限循環

  number: 循環的次數

6.animation-direction  檢索或設定物件動畫在循環中是否反向運動

  normal：正常方向

  reverse：反方向運行

  alternate：動畫先正常運行再反方向運行，並持續交替運行

  alternate-reverse：動畫先反運行再正方向運行，並持續交替運行

7.animation-play-state  檢索或設定物件動畫的狀態

  animation-play-state:running | paused;

  running:運動

  paused: 暫停

#  animation-play-state:paused;      當滑鼠經過時動畫停止，滑鼠移開動畫繼續執行

8.animation-fill-mode  檢索或設定物件動畫時間以外的狀態

  none:預設值，不設定物件動畫以外的狀態

  forwards:設定物件狀態為動畫結束時的狀態

  backwards:設定物件狀態為動畫開始時的狀態

#  both :設定物件狀態為動畫開始或結束時的狀態

【相關推薦】

1. 

詳細介紹CSS3中animation-direction屬性

# 2. 

分享一個監聽css3動畫（animation）結束事件實例

#3. 

利用animation屬性實作循環間的延時執行實例教學

#4. 

詳解css3中兩種暫停方式（transition、animation）

#

以上是必須掌握的CSS3動畫（Animation）的8大屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！