学科分类
目录
HTML5+CSS3

@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属性。

点击此处
隐藏目录