# CSS3 @keyframes 規則 ## 實例 使 div 元素勻速向下移動： ``` @keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox */ { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari 和 Chrome */ { from {top:0px;} to {top:200px;} } @-o-keyframes mymove /* Opera */ { from {top:0px;} to {top:200px;} } ``` 頁面底部有更多實例。 ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 目前瀏覽器都不支持 @keyframes 規則。 Firefox 支持替代的 @-moz-keyframes 規則。 Opera 支持替代的 @-o-keyframes 規則。 Safari 和 Chrome 支持替代的 @-webkit-keyframes 規則。 ## 定義和用法 通過 @keyframes 規則，您能夠創建動畫。 創建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。 在動畫過程中，您能夠多次改變這套 CSS 樣式。 以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價于 0% 和 100%。 0% 是動畫的開始時間，100% 動畫的結束時間。 為了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。 注釋：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。 ## 語法 ``` @keyframes _animationname_ {_keyframes-selector_ {_css-styles_;}} ``` | 值 | 描述 | | --- | --- | | _animationname_ | 必需。定義動畫的名稱。 | | _keyframes-selector_ | 必需。動畫時長的百分比。 合法的值： * 0-100% * from（與 0% 相同） * to（與 100% 相同） | | _css-styles_ | 必需。一個或多個合法的 CSS 樣式屬性。 | ## 親自試一試 - 實例 ### 實例 1 在一個動畫中添加多個 keyframe 選擇器： ``` @keyframes mymove { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } @-moz-keyframes mymove /* Firefox */ { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } @-webkit-keyframes mymove /* Safari 和 Chrome */ { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } @-o-keyframes mymove /* Opera */ { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} } ``` ### 實例 2 在一個動畫中改變多個 CSS 樣式： ``` @keyframes mymove { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} } @-moz-keyframes mymove /* Firefox */ { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} } @-webkit-keyframes mymove /* Safari 和 Chrome */ { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} } @-o-keyframes mymove /* Opera */ { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} } ``` ### 實例 3 帶有多個 CSS 樣式的多個 keyframe 選擇器： ``` @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;} } @-moz-keyframes mymove /* Firefox */ { 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;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 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;} } @-o-keyframes mymove /* Opera */ { 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;} } ``` ## 相關頁面 CSS3 教程：[CSS3 動畫](/css3/css3_animation.asp "CSS3 動畫")