CSS3中的关键帧

摘要

@keyframes 让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。

@keyframes 可以通过 CSS对象模型接口（CSS object model interface ）来访问 CSSKeyframesRule.

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

关键帧的编写顺序没有要求，最后只会根据百分比按由小到大的顺序触发。

让关键帧序列生效

为了让一个关键帧列表有效，它必须至少包含了对0%（或from）和100%（或to）即动画的开头帧和结束帧的定义。 如果都没有进行定义，那么整个@keyframes 是无效的，不能使用。

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

重复定义（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% 关键帧中.

只有同时在0% 和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是有效的，但是其他的属性(left: 20px)会被忽略

 层叠样式(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; }
}

语法

@keyframes <identifier> {
  [ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]*
}

Values

<identifier>

帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。

from

等效于 0%.

to

等效于 100%.

<percentage>

动画序列中，触发关键帧的时间点，使用百分值来表示。

实例

参见CSS animations。

Specifications

浏览器兼容性

注意

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

扩展阅读

• Using CSS animations
• AnimationEvent