CSS3 - @keyframes
阿新 • • 發佈：2017-06-29
cnblogs xpl 發生 ble nbsp rom 創建 gre 綁定
語法
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 | 描述 |
| animationname | 必需。定義動畫的名稱。 |
| keyframes-selector |
必需。動畫時長的百分比。 合法的值：
|
| 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 規則。
例：
<!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -moz-animation:mymove 5s infinite; /* Firefox */ -webkit-animation:mymove 5s infinite; /* Safari and Chrome*/ -o-animation:mymove 5s infinite; /* Opera */ } @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;} } </style> </head> <body> <p><b>註釋：</b>本例在 Internet Explorer 中無效。</p> <div></div> </body> </html>
CSS3 - @keyframes