@keyframes

关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。转换 transition 相比,关键帧 keyframes 可以控制动画序列的中间步骤。

@keyframes slidein {
  from {
    transform: translateX(0%); 
  }

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

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

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

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

让关键帧序列生效

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

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

重复定义

如果多个关键帧使用同一个名称,以最后一次定义的为准。 @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%72%100% 中。

同一关键帧中的相同属性被重复定义

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

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

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

 Firefox 14 开始支持层叠 keyframes。

关键帧中的 !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; }
}

语法

取值

custom-ident
帧列表的名称。名称必须符合 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 动画

规范

规范 状态 备注
CSS Animations
@keyframes
Working Draft

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@keyframesChrome Full support 43
Full support 43
Full support 2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 16
Notes
Full support 16
Notes
Notes @keyframes is unsupported in scoped stylesheets in Firefox (bug 830056).
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with 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 Implemented with the vendor prefix: -moz-
IE Full support 10Opera Full support 30
Full support 30
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 12.1 — 15
No support 12 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 9
Full support 9
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 43
Full support 43
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 43
Full support 43
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 16
Full support 16
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with 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 Implemented with the vendor prefix: -moz-
Opera Android Full support 30
Full support 30
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 12.1 — 14
No support 12 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support 9
Full support 9
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 4.0
Full support 4.0
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Ignore !important declarationsChrome Full support 45Edge Full support 79Firefox Full support 19IE No support NoOpera Full support 32Safari Full support 10.1WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 19Opera Android Full support 32Safari iOS Full support 10.3Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
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.

参见