@keyframes

@keyframes规则用于创建动画，animation属性只有配合@keyframes规则才能实现动画效果，因此在学习animation属性之前，我们首先要学习@keyframes规则，@keyframes规则的语法格式如下：

@keyframes animationname {

keyframes-selector{css-styles;}

}

在上面的语法格式中，@keyframes属性包含的参数具体含义如下：

●animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。

●keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。

●css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。

例如，使用@keyframes属性可以定义一个淡入动画，示例代码如下：

@keyframes appear

{

  0%{opacity:0;}   /*动画开始时的状态，完全透明*/

  100%{opacity:1;}  /*动画结束时的状态，完全不透明*/

}

上述代码创建了一个名为apper的动画，该动画在开始时opacity为0（透明），动画结束时opacity为1（不透明）。该动画效果还可以使用等效代码来实现，具体如下：

@keyframes appear

{

  from{opacity:0;}   /*动画开始时的状态，完全透明*/

  to{opacity:1;}    /*动画结束时的状态，完全不透明*/

}

另外，如果需要创建一个淡入淡出的动画效果，可以通过如下代码实现，具体如下：

@keyframes appear

{

  from,to{opacity:0;}    /*动画开始和结束时的状态，完全透明*/

  20%,80%{opacity:1;}    /*动画的中间状态，完全不透明*/

}

在上述代码中，为了实现淡入淡出的效果，需要定义动画开始和结束时元素不可见，然后渐渐淡出，在动画的20%处变得可见，然后动画效果持续到80%处，再慢慢淡出。

注意：

Internet Explorer 9以及更早的版本，不支持@keyframe 规则或animation属性。