摘要

@keyframes 规则通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。这比转换更能控制动画序列的中间步骤。

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

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

要使用关键帧, 先创建一个带名称的@keyframes规则,以便后续使用 animation-name 这个属性来将一个动画同其关键帧声明匹配。每个@keyframes 规则包含多个关键帧,也就是一段样式块语句,每个关键帧有一个百分比值作为名称,代表在动画进行中,在哪个阶段触发这个帧所包含的样式。

您可以按任意顺序列出关键帧百分比;他们将按照其应该发生的顺序来处理。

让关键帧序列生效

如果一个关键帧规则没有指定动画的开始或结束状态(也就是,0%/from 和100%/to,浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画,最终返回初始状态。

如果在关键帧的样式中使用了不能用作动画的属性,那么这些属性会被忽略掉,支持动画的属性仍然是有效的,不受波及。

重复定义(Duplicate resolution)

如果多个关键帧使用同一个名称,以最后一次定义的为准。 @keyframes 不存在层叠样式(cascade)的情况,所以动画在一个时刻(阶段)只会使用一个的关键帧的数据。

如果一个@keyframes 里的关键帧的百分比存在重复的情况,以最后一次定义的关键帧为准。 因为@keyframes 的规则不存在层叠样式(cascade)的情况,即使多个关键帧设置相同的百分值也不会全部执行。

属性个数不定

如果一个关键帧中没有出现其他关键帧中的属性,那么这个属性将使用插值(不能使用插值的属性除外, 这些属性会被忽略掉)。例如:

@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%100% 关键帧中.

当关键帧被重复定义

如果某一个关键帧出现了重复的定义,且重复的关键帧中的css属性值不同,以最后一次定义的属性为准。例如:

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

上面这个例子中,50% 关键帧中设置的属性top: 10px是有效的,但是其他的属性会被忽略

 层叠样式(cascade) 的特性从Firefox 14版本开始可以使用了。 拿上面的例子来说,对于 50% 关键帧,left: 20px 这个值不会被忽略掉。 目前这种特性还没写入规范,但是已经在探讨中了。

关键帧中的 !important 关键词

关键帧中出现的 !important 关键词将会被忽略

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

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

语法

取值

<identifier>
帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。
from
等效于 0%.
to
等效于 100%.
<percentage>
动画序列中,触发关键帧的时间点,使用百分值来表示。

语法格式

@keyframes <keyframes-name> {
  <keyframe-block-list>
}

where
<keyframes-name> = <custom-ident> | <string>
<keyframe-block-list> = <keyframe-block>+

where
<keyframe-block> = <keyframe-selector># { <declaration-list> }

where
<keyframe-selector> = from | to | <percentage>

实例

参见CSS animations

规范

规范 状态 说明
CSS Animations
@keyframes
Working Draft  

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

43

Yes -webkit-

Yes

161

49 -webkit-

44 -webkit- 2

5 -moz-

10

12.1 — 15

15 -webkit-

12 — 15 -o-

9

4 -webkit-

Ignore !important declarations ? ?19 ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support

43

Yes -webkit-

43

Yes -webkit-

Yes

16

49 -webkit-

44 -webkit- 2

5 -moz-

12.1

15 -webkit-

12 — 14 -o-

Yes

Yes -webkit-

4.0

Yes -webkit-

Ignore !important declarations ? ? ?19 ? ? ?

1. @keyframes is unsupported in scoped stylesheets in Firefox (bug 830056).

2. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

注意

  1. @keyframes 不能在内联样式中使用 (bug 830056).

相关链接

文档标签和贡献者

标签: 
最后编辑者: Lim,