摘要

@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  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 43
Full support 43
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support YesFirefox Full support 16
Notes
Full support 16
Notes
Notes @keyframes is unsupported in scoped stylesheets in Firefox (bug 830056).
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled 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.
Full support 5
Prefixed
Prefixed Requires the vendor prefix: -moz-
IE Full support 10Opera No support 12.1 — 15
No support 12.1 — 15
Full support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
No support 12 — 15
Prefixed
Prefixed Requires the vendor prefix: -o-
Safari Full support 9
Full support 9
Full support 4
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support 43
Full support 43
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Chrome Android Full support 43
Full support 43
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile Full support YesFirefox Android Full support 16
Full support 16
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled 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.
Full support 5
Prefixed
Prefixed Requires the vendor prefix: -moz-
Opera Android Full support 12.1
Full support 12.1
Full support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
No support 12 — 14
Prefixed
Prefixed Requires the vendor prefix: -o-
Safari iOS Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android Full support 4.0
Full support 4.0
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Ignore !important declarationsChrome ? Edge ? Firefox Full support 19IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 19Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

注意

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

相关链接

文档标签和贡献者

标签: 
最后编辑者: Lim,