animation-name

語法:

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

<single-animation-name> = none | <identifier>

預設值none

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

繼承性:無

動畫性:否

計算值:指定值

媒體:視覺

相關屬性:[ @keyframes ]

取值:

none:
不引用任何動畫名稱
<identifier>
定義一個或多個動畫名稱(identifier標識)

說明:

檢索或設定物件所應用的動畫名稱,必須與規則@keyframes配合使用,因為動畫名稱由@keyframes定義
  • 如果提供多個屬性值,以逗號進行分隔。
  • 對應的腳本特性為animationName

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
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. 部分瀏覽器不支援偽元素動畫,或者支援得不夠好,盡可能不要利用偽元素來做動畫

示例: