語法

@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需。定義動畫的名稱。
keyframes-selector
必需。動畫時長的百分比。
合法的值：
0-100%
from（與 0% 相同）
to（與 100% 相同）
css-styles 必需。一個或多個合法的 CSS 樣式屬性。

定義和用法
通過 @keyframes 規則，您能夠創建動畫。
創建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價于 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結束時間。
為了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。
注釋：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。

目前瀏覽器都不支持 @keyframes 規則。
Firefox 支持替代的 @-moz-keyframes 規則。
Opera 支持替代的 @-o-keyframes 規則。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 規則。

例：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表