定義和用法
通過 @keyframes 規(guī)則，您能夠創(chuàng)建動畫。
創(chuàng)建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規(guī)定改變發(fā)生的時間，或者通過關(guān)鍵詞 "from" 和 "to"，等價于 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結(jié)束時間。
提示：為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。
提示：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。
注意：!important 規(guī)則在關(guān)鍵幀中被忽略（請參見本頁最后一個例子）。
另請參閱：
CSS3 教程：CSS3 動畫
實例
例子 1
使 div 元素勻速向下移動：
<pre class="cssHigh" style="margin: 15px 0px 0px; padding: 20px; border: 1px solid rgb(221, 221, 221); width: 765px; background: rgb(255, 254, 252); line-height: 1.5; font-family: Consolas, 微軟雅黑, "Source Code Pro", Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace, PingFangSC-Regular, 宋體; overflow-x: auto;">@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</pre>
例子 2
在一個動畫中添加多個 keyframe 選擇器：
<pre class="cssHigh" style="margin: 15px 0px 0px; padding: 20px; border: 1px solid rgb(221, 221, 221); width: 765px; background: rgb(255, 254, 252); line-height: 1.5; font-family: Consolas, 微軟雅黑, "Source Code Pro", Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace, PingFangSC-Regular, 宋體; overflow-x: auto;">@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
</pre>
例子 3
在一個動畫中改變多個 CSS 樣式：
<pre class="cssHigh" style="margin: 15px 0px 0px; padding: 20px; border: 1px solid rgb(221, 221, 221); width: 765px; background: rgb(255, 254, 252); line-height: 1.5; font-family: Consolas, 微軟雅黑, "Source Code Pro", Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace, PingFangSC-Regular, 宋體; overflow-x: auto;">@keyframes mymove {
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
</pre>
例子 4
帶有多個 CSS 樣式的多個 keyframe 選擇器：
<pre class="cssHigh" style="margin: 15px 0px 0px; padding: 20px; border: 1px solid rgb(221, 221, 221); width: 765px; background: rgb(255, 254, 252); line-height: 1.5; font-family: Consolas, 微軟雅黑, "Source Code Pro", Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace, PingFangSC-Regular, 宋體; overflow-x: auto;">@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;}
}
</pre>
例子 5
注意：!important 規(guī)則在關(guān)鍵幀中被忽略：
<pre style="margin: 15px 0px 0px; padding: 20px; border: 1px solid rgb(221, 221, 221); width: 765px; background: rgb(255, 254, 252); line-height: 1.5; font-family: Consolas, 微軟雅黑, "Source Code Pro", Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace, PingFangSC-Regular, 宋體; overflow-x: auto;">@keyframes myexample {
from {top: 0px;}
50% {top: 100px !important;} /* 被忽略 */
to {top: 200px;}
}
</pre>
CSS 語法
<pre style="margin: 15px 0px 0px; padding: 20px; border: 1px solid rgb(221, 221, 221); width: 765px; background: rgb(255, 254, 252); line-height: 1.5; font-family: Consolas, 微軟雅黑, "Source Code Pro", Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace, PingFangSC-Regular, 宋體; overflow-x: auto;">@keyframes animationname {keyframes-selector {css-styles;}}</pre>
屬性值
| 值 | 描述 |
| animationname | 必需。定義動畫的名稱。 |
| keyframes-selector |
必需。動畫時長的百分比。
合法的值：
- 0-100%
- from（與 0% 相同）
- to（與 100% 相同）
|
| css-styles | 必需。一個或多個合法的 CSS 樣式屬性。 |
