CSS @keyframes 用于定义一组动画或过渡的关键帧。关键帧是一种指定元素样式在动画过程中如何变化的方法。您可以定义动画的开始状态和结束状态之间的中间步骤或关键帧。
语法
@keyframes =
@keyframes <keyframes-name> { <rule-list> } 可能的值
@keyframes at-rule in CSS 可以具有以下值:
<custom-ident>:确定关键帧列表的名称。该名称必须与 CSS 语法中的标识符生成相匹配。
from:确定 0% 的起始偏移量。
to :确定 100% 的结束偏移量。
<percentage>:确定动画序列期间指定关键帧应出现的时间百分比。
概述
为了使用关键帧，您需要创建一个 @keyframe 规则，指定一个名称，供animation-name 属性。
每个 @keyframe 规则都包含关键帧选择器的样式列表，用于指定关键帧发生时动画的百分比值。
它还列出了包含特定关键帧样式的块。
传递百分比值时，您可以按任意顺序使用它们。系统按照它们应发生的顺序处理它们。
带有 CSS 对象模型接口 CSSKeyframesRule 的 @keyframes at 规则，可以通过 JavaScript 访问。
当动画的开始和结束状态没有明确指定时，浏览器将使用开始/结束状态元素的现有样式。这用于元素从初始状态到返回的动画。无法使用关键帧进行动画处理的属性将被忽略，但受支持的属性将进行动画处理。
如果同一名称存在多个关键帧集，解析器指定和遇到的最后一个，将被考虑。由于 @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 at-rule 由名称 example-box 定义，并指定了某些样式。
关键帧名称被传递到 div 元素上的动画属性，该属性会考虑该关键帧规则下提到的样式来对元素进行动画处理。
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 由名称 example-rule 定义，并指定了某些样式。
关键帧名称 (sample-rule) 被传递到 div 元素上的动画属性，该属性为元素设置动画并将框从左向右移动。
sample-rule 是动画的名称，5s 是动画的持续时间，infinite 表示动画无限重复。