CSS 中的 @keyframes at rule 用于定义动画或过渡的一组关键帧。关键帧是一种指定元素的样式在动画过程中如何变化的方法。您可以定义动画的开始状态和结束状态之间的中间步骤或关键帧。
语法
@keyframes = @keyframes <keyframes-name> { <rule-list> }
可能的值
CSS 中的 @keyframes at-rule 可以具有以下值：
- <custom-ident>：确定关键帧列表的名称。此名称必须与 CSS 语法中的标识符生成匹配。
- from：确定 0% 的起始偏移量。
- to：确定 100% 的结束偏移量。
- <percentage>：确定动画序列中指定关键帧应出现的时间百分比。
概述
- 为了使用关键帧，您需要创建一个@keyframe规则，并指定一个名称，该名称将由 animation-name 属性使用。
- 每个@keyframe规则都由一个关键帧选择器的样式列表组成，当关键帧发生时，该选择器通过动画指定百分比值。
- 它还列出了包含特定关键帧样式的块。
- 在传递百分比值时，您可以按任何顺序使用它们。系统按照它们应发生的顺序处理它们。
- 带有 CSS 对象模型接口 CSSKeyframesRule 的 @keyframes at-rule 可以通过 JavaScript 访问。
- 当没有明确指定动画的开始和结束状态时，浏览器将使用现有的开始/结束状态元素样式。这用于元素从其初始状态到其返回的动画。无法使用关键帧进行动画处理的属性将被忽略，但支持的属性将进行动画处理。
- 如果一个公用名称存在多个关键帧集，则将考虑解析器指定并遇到的最后一个关键帧集。由于@keyframes规则不会级联，因此动画永远不会派生自多个关键帧规则集。
- 如果给定的动画时间偏移量重复，则@keyframes规则中指定百分比值的所有关键帧都将用于该帧。当多个关键帧指定相同的百分比值时，将在@keyframes规则内进行级联。
- 将计算或插值某些关键帧中遗漏的属性，并从动画中避免那些无法插值的属性。
- 当多次声明关键帧时，如果未在每个关键帧中指定所有受影响的属性，则将考虑这些关键帧中的所有指定值。
- 带有 ！important 限定符的关键帧中的所有声明都将被忽略。
只有 Firefox 14 才支持级联关键帧。
例
下面是 @keyframes at-rule 的示例。
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
margin: 100px;
background-color: blue;
animation: sample-box 8s infinite;
}
@keyframes sample-box {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: lightgreen;
}
75% {
background-color: royalblue;
}
100% {
background-color: purple;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在上面的例子中：
- @keyframes规则由名称 sample-box 定义，并指定了某些样式。
- 关键帧名称将传递给 div 元素上的 animation 属性，该属性会考虑该关键帧规则下提到的样式对元素进行动画处理。
- sample-box 是动画的名称，8s 是动画的持续时间，infinite 表示动画无限重复。
这是 @keyframes at 规则的另一个示例。
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: green;
position: relative;
animation: sample-rule 5s infinite;
}
@keyframes sample-rule {
from {left: 0px;}
50% {left: 50px;} /* ignored */
to {left: 100px;}
}
</style>
</head>
<body>
<h1>@keyframes At-Rule</h1>
<p>Check for the animation</p>
<div></div>
</body>
</html>
在上面的例子中：
- @keyframes at rule 由名称 sample-rule 定义，并指定了某些样式。
- 关键帧名称 （sample-rule） 被传递给 div 元素上的 animation 属性，该属性为元素添加动画并从左向右移动框。
- sample-rule 是动画的名称，5s 是动画的持续时间，infinite 表示动画无限重复。
