@keyframes

语法

@keyframes slide-in {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

值

<custom-ident>

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

from

起始偏移量为 0%。

改为

结束偏移量为 100%。

<percentage>

指定关键帧应发生时，动画序列所经过时间的百分比。

<timeline-range-name> <percentage>

指定关键帧应发生时，指定 animation-range 所经过时间的百分比。有关使用命名时间线范围的动画类型，请参阅 CSS 滚动驱动动画。

描述

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

您可以按任意顺序罗列关键帧百分比；它们将按应发生的顺序进行处理。

JavaScript 可以通过 CSS 对象模型接口 CSSKeyframesRule 访问 @keyframes @规则。

有效的关键帧列表

如果关键帧规则未指定动画的开始或结束状态（即 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

带有 !important 限定符的关键帧中的声明将被忽略。

@keyframes important1 {
  0% {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important; /* ignored */
  }
  100% {
    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 动画示例

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

规范

浏览器兼容性

另见

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