CSS @keyframes 規則
更多“自己嘗試”的例子見下文。
定義和用法
@keyframes 規則指定了動畫程式碼。
動畫是透過逐漸從一組 CSS 樣式變為另一組 CSS 樣式來建立的。
在動畫過程中，您可以多次更改 CSS 樣式集。
以百分比指定樣式更改何時發生，或使用關鍵字“from”和“to”，這與 0% 和 100% 相同。0% 是動畫的開始，100% 是動畫完成時。
提示：為了獲得最佳瀏覽器支援，您應該始終同時定義 0% 和 100% 選擇器。
注意：使用動畫屬性控制動畫的外觀，並繫結動畫到選擇器。
注意：!important 規則在關鍵幀中被忽略（請參閱本頁的最後一個示例）。
瀏覽器支援
表格中的數字表示完全支援該規則的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| @keyframes | 43 | 10 | 16 | 9 | 30 |
CSS 語法
@keyframes 動畫名稱 {關鍵幀選擇器 {css-樣式;}}
屬性值
| 值 | 描述 |
|---|---|
| 動畫名稱 | 必需。定義動畫的名稱。 |
| 關鍵幀選擇器 | 必需。動畫持續時間的百分比。 合法值 0-100% 注意：一個動畫中可以有多個關鍵幀選擇器。 |
| css-樣式 | 必需。一個或多個合法的 CSS 樣式屬性 |
更多示例
示例
在一個動畫中新增多個關鍵幀選擇器
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
自己動手試一試 »
示例
在一個動畫中更改多個 CSS 樣式
@keyframes mymove {
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
自己動手試一試 »
示例
帶有多個 CSS 樣式的多個關鍵幀選擇器
@keyframes mymove {
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
自己動手試一試 »
示例
注意：!important 規則在關鍵幀中被忽略
@keyframes myexample {
from {top: 0px;}
50% {top: 100px !important;} /* 忽略 */
to {top: 200px;}
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 動畫
