@keyframes

語法:

@keyframes <identifier> { <keyframes-blocks> }

<keyframes-blocks>:[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

取值:

<identifier>
identifier定義一個動畫名稱
<keyframes-blocks>:
定義動畫在每個階段的樣式,即幀動畫。

說明:

指定動畫名稱和動畫效果。
  • @keyframes定義的動畫名稱用來被animation-name所使用。
  • 定義動畫時,簡單的動畫可以直接使用關鍵字from和to,即從一種狀態轉場到另一種狀態:

    示例程式碼:

    @keyframes testanimations { from { opacity: 1; } to { opacity: 0; } }

    其中testanimations是該動畫的名字,該動畫表示某個東西將逐漸消失。

  • 如果復雜的動畫,可以混合<percentage>去設定某個時間段內的任意時間點的樣式:

    示例程式碼:

    @keyframes testanimations { from { transform: translate(0, 0); } 20% { transform: translate(20px, 20px); } 40% { transform: translate(40px, 0); } 60% { transform: translate(60px, 20); } 80% { transform: translate(80px, 0); } to { transform: translate(100px, 20px); } }
  • 當然,也可以不使用關鍵字from和to,而都使用<percentage>

    示例程式碼:

    @keyframes testanimations{ 0% { transform: translate(0, 0); } 20% { transform: translate(20px, 20px); } 40% { transform: translate(40px, 0); } 60% { transform: translate(60px, 20px); } 80% { transform: translate(80px, 0); } 100% { transform: translate(100px, 20px); } }

    注意,這裡的0%不能簡寫成0,0是非標准語法(雖然被某些瀏覽器所支援)。

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0-9.0 2.0-4.0 4.0-43.0
-webkit-
3.1-3.2 15.0-29.0
-webkit-
3.2-8.1
-webkit-
2.1-3.0
-webkit-
18.0-40.0
-webkit-
10.0+ 5.0-15.0
-moz-
4.0-8.1
-webkit-
4.0+
-webkit-
16.0

示例: