@keyframes

<custom-ident>

标识关键帧列表的名称。这必须与 CSS 语法中的标识符生成匹配。

from

0% 的起始偏移量。

to

100% 的结束偏移量。

<percentage>

动画序列中指定关键帧发生的时间的百分比。

<timeline-range-name> <percentage>

在指定 animation-range 中指定关键帧发生时间的百分比。有关使用命名时间线范围的动画类型的更多信息，请参阅 CSS 滚动驱动动画。

要使用关键帧，请创建一个 @keyframes 规则，其名称由 animation-name 属性使用以将动画与其关键帧声明匹配。每个 @keyframes 规则包含一个关键帧选择器样式列表，该列表指定动画中关键帧发生的百分比，以及包含该关键帧样式的块。

可以按任何顺序列出关键帧百分比；它们将按应该发生的顺序处理。

JavaScript 可以使用 CSS 对象模型接口 CSSKeyframesRule 访问 @keyframes at-规则。

如果关键帧规则没有指定动画的开始或结束状态（即，0%/from 和 100%/to），浏览器将使用元素的现有样式作为开始/结束状态。这可以用来从元素的初始状态到其初始状态进行动画。

在关键帧规则中无法动画的属性将被忽略，但支持的属性仍将被动画。

如果针对给定名称存在多个关键帧集，则解析器遇到的最后一个关键帧集将被使用。@keyframes 规则不会级联，因此动画永远不会从多个规则集中派生关键帧。

如果给定的动画时间偏移量重复，则 @keyframes 规则中针对该百分比的所有关键帧都将用于该帧。如果多个关键帧指定相同的百分比值，则在 @keyframes 规则内会发生级联。

如果属性没有在每个关键帧中指定，则它们会在可能的情况下进行插值——无法插值的属性将从动画中删除。例如

@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
  72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}

在这里，top 属性使用 0%、30% 和 100% 关键帧进行动画，而 left 属性使用 0%、68%、72% 和 100% 关键帧进行动画。

如果关键帧被多次定义，但并非所有受影响的属性都在每个关键帧中，则将考虑这些关键帧中指定的所有值。例如

@keyframes identifier {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
    left: 20px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}

在本例中，在 50% 关键帧处，使用的值为 top: 10px 和 left: 20px。

级联关键帧从 Firefox 14 开始支持。

使用 !important 限定的关键帧中的声明将被忽略。

@keyframes important1 {
  from {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important; /* ignored */
  }
  to {
    margin-top: 100px;
  }
}

@keyframes important2 {
  from {
    margin-top: 50px;
    margin-bottom: 100px;
  }
  to {
    margin-top: 150px !important; /* ignored */
    margin-bottom: 50px;
  }
}

@keyframes = 
  @keyframes <keyframes-name> { <qualified-rule-list> }  

<keyframes-name> = 
  <custom-ident>  |
  <string>        

请参阅 使用 CSS 动画 和 使用滚动驱动动画使元素在滚动时动画 以获取示例。

• animation-range
• CSS 滚动驱动动画
• 使用 CSS 动画
• CSS 动画 模块
• 使用滚动驱动动画在滚动时动画化元素
• AnimationEvent