@keyframes

版本： CSS3

关键帧@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 ，浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画，最终返回初始状态。

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

重复定义（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; }
}

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
IE10以上版本的浏览器都支持 @keyframes

语法

@keyframes <custom-ident> { from | to | <percentage> }

取值

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

实例

@keyframes 指定动画名称和动画效果。通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。这比转换更能控制动画序列的中间步骤。 

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

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

@keyframes testanimations { from { opacity: 1; } to { opacity: 0; } }

其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。

如果复杂的动画，可以混合<percentage>去设置某个时间段内的任意时间点的样式： 

@keyframes testanimations {
	from { transform: translate(0, 0); } 
	20% { transform: translate(20px, 20px); } 
	40% { transform: translate(40px, 0); } 
	60% { transform: translate(60px, 20); } 
	80% { transform: translate(80px, 0); } 
	to { transform: translate(100px, 20px); } 
}

当然，也可以不使用关键字from和to，而都使用<percentage>： 

@keyframes testanimations{ 
	0% { transform: translate(0, 0); } 
	20% { transform: translate(20px, 20px); } 
	40% { transform: translate(40px, 0); } 
	60% { transform: translate(60px, 20px); } 
	80% { transform: translate(80px, 0); } 
	100% { transform: translate(100px, 20px); } 
}

注意，这里的0%不能简写成0，0是非标准语法（虽然被某些浏览器所支持）。

上篇： @font-face