CSS3 animation-name属性及小球弹跳动画实例

　　CSS3中的制作动画属性animation 总共有8个取值，第一个就是动画名称animation-name，它主要用于定义动画的关键帧，控制动画的运动。CSS3 中动画的关键帧是通过百分比来控制的，不像 flash 在多少帧插入一个关键帧。

　　animation-name属性比较简单，就是给动画取一个名字。它可以定义多个值，也就是动画可以取多个名字，每个名字用来定义一个关键帧，以制作多种动画效果。下面先看animation-name的语法规则，再看定义了多个名称的小球弹跳动画实例。

 

　　一、animation-name语法规则

　　animation-name：<single-animation-name>[, <single-animation-name> * ]

　　<single-animation-name> = none | <identifier>

 

　　二、语法说明

　　1、animation-name 可以设置多个动画名称，默认值为none

　　A、<single-animation-name> 表示第一个动画名称，不能省略；

　　B、[]中的 <single-animation-name> 表示第二个动画名称，可以省略；

　　C、* 表示第三个、第四个、……第n个动画名称，可以省略；

 

　　2、<single-animation-name> 取值如下：

　　none：不定义动画名称；

　　<identifier>：定义一个动画名称。

 

　　三、animation-name小球弹跳动画实例

　　实例中为动画定义了三个名称，分别为每个名称定义了一个关键帧，它们协作控制一个动画的全过程，以下是具体的实例代码：

　　html代码：

　　<div class="div"><h3>CSS3<br />animation-name</h3></div>

　　CSS代码：

　　<style type="text/css">
　　.div{position:relative;overflow:hidden;width:160px;height:160px; border-radius:80px;border:1px solid #ab9595;background-color:#e3e2e0; text-align:center; vertical-align:middle;
 animation:animation1 2s ease-out forwards, animation2 2s ease-out 2s forwards, animation3 2s ease-out 4s forwards;}

　　.div h3{margin-top:55px;}

@keyframes: animation1{

0%{transform:translate(0, 0);opacity:0;}

30%{transform:translate(0, 0);opacity:0.25;}

50%{transform:translate(0, 0);opacity:0.5;}
90%{transform:translate(0, 0);opacity:1;}
100%{transform:translate(0, 100px);opacity:1;}
}

@keyframes: animation2{
0%{transform:translate(0, 20px);opacity:1;}
10%{transform:translate(0, 100px);opacity:1;}
20%{transform:translate(0, 30px);opacity:1;}
30%{transform:translate(0, 100px);opacity:1;}

40%{transform:translate(0, 40px);opacity:1;}
50%{transform:translate(0, 100px);opacity:1;}

60%{transform:translate(0, 50px);opacity:1;}
70%{transform:translate(0, 100px);opacity:1;}
80%{transform:translate(0, 70px);opacity:1;}

85%{transform:translate(0, 100px);opacity:1;}
90%{transform:translate(0, 90px);opacity:1;}
93%{transform:translate(0, 100px);opacity:1;}

96%{transform:translate(0, 95px);opacity:1;}
100%{transform:translate(0, 100px);opacity:1;}}

@keyframes: animation3{
0%{transform:translate(0, 100px);opacity:1;}

50%{transform:scale(1);opacity:1;}
100%{transform:scale(0);opacity:0;}
}
　　</style>

　　效果图（未见，刷新）：