定义和用法
通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
提示：为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
提示：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
注意：!important 规则在关键帧中被忽略（请参见本页最后一个例子）。
另请参阅：
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 规则在关键帧中被忽略：
<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 样式属性。 |
