animation

語法:

animation<single-animation>[,<single-animation>]*

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

預設值看每個獨立屬性

適用於:所有元素,包含偽物件:after和:before

繼承性:無

動畫性:否

計算值:看每個獨立屬性

媒體:視覺

取值:

<' animation-name '>:
檢索或設定物件所應用的動畫名稱
<' animation-duration '>:
檢索或設定物件動畫的持續時間
<' animation-timing-function '>:
檢索或設定物件動畫的轉場類型
<' animation-delay '>:
檢索或設定物件動畫延遲的時間
<' animation-iteration-count '>:
檢索或設定物件動畫的循環次數
<' animation-direction '>:
檢索或設定物件動畫在循環中是否反向運動
<' animation-fill-mode '>:
檢索或設定物件動畫時間之外的狀態
<' animation-play-state '>:
檢索或設定物件動畫的狀態。w3c正考慮是否將該屬性移除,因為動畫的狀態可以通過其它的方式實現,比如重設樣式

說明:

復合屬性。檢索或設定物件所應用的動畫特效。
  • 如果提供多組屬性值,以逗號進行分隔。
  • 注意:如果只提供一個<time>參數,則為 <' animation-duration '> 的值定義;如果提供二個<time>參數,則第一個為 <' animation-duration '> 的值定義,第二個為 <' animation-delay '> 的值定義
  • 對應的腳本特性為animation

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-9.0 2.0-4.0 4.0-42.0-webkit- 6.0-8.0-webkit- 15.0-29.0-webkit- 6.0-8.4-webkit- 2.1-3.0-webkit- #1 18.0-42.0-webkit-
10.0+ 5.0-15.0-moz- 43.0+ 9.0+ 30.0+ 9.0+ 4.0-40.0-webkit-
16.0+
  1. 在一些場景中會有錯誤行為
  2. 部分瀏覽器不支援偽元素動畫,或者支援得不夠好,盡可能不要利用偽元素來做動畫

示例: