CSS3 @keyframes rule
说明
@keyframes CSS at-rule 用于通过沿动画序列建立关键帧来指定动画序列循环期间的中间步骤。
@keyframes 规则由关键字 "@keyframes" 组成，后跟一个为动画提供名称的标识符（将使用 animation-name 属性引用），然后是一组样式规则（由大括号分隔）。
关键帧样式规则的关键帧选择器以百分比 (%) 或关键字 from（与 0% 相同）或 to（与 100% 相同）开头。 选择器用于指定沿动画持续时间构建关键帧的位置。
语法
此规则的语法如下所示：
|
@keyframes animation-name { keyframes-selector { property: value; } } |
下面的示例显示了 @keyframes 规则的作用。
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 2s;
/* 标准语法 */
animation-name: moveit;
animation-duration: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
/* 标准语法 */
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}注意：如果关键帧选择器指定负百分比值或高于 100% 的值，则关键帧将被忽略。
参数
下表描述了该规则的参数。
| 值 | 说明 |
|---|---|
| Required — CSS 有效需要以下参数。 | |
animation-name |
动画的名称。 |
| keyframes-selector | 指定沿动画持续时间的百分比。 关键帧规则的关键帧声明块由属性和值组成。 |
浏览器兼容性
所有主要的现代浏览器都支持 @keyframes 规则。
 |
基本支持—
|
进一步阅读
请参阅以下教程： CSS 媒体类型.
Advertisements