CSS3 animation-duration属性及文字闪烁动画实例

　　CSS3新增了制作动画属性animation，animation有多个取值，其中一个为控制动画的持续时间的取值animation-duration，它主要用于控制动画运动多长时间；如果动画定义了多个名称（关键帧），则该时间只对一个关键帧有效。

　　animation-duration属性在animation语法中用 <time> 表示，也就是 animation-duration 的取值。它的语法规则比较简单，下面先了解语法规则，再看具体怎么应用，也就是看用它制作动画实例，即文字闪烁动画实例。

 

　　一、animation-duration语法规则

　　animation-duration：<time>[, <time> * ]

 

　　二、语法说明

　　1、animation-duration 可以设置多个动画持续时间，默认值为0s

　　A、<time> 表示第一个动画持续时间，不能省略，数字后带单位秒（s）；

　　B、[]中的 <time> 表示第二个动画持续时间，可以省略；

　　C、* 表示第三个、第四个、……第n个动画持续时间，可以省略；

 

　　2、<time> 取值如下：

　　默认值为0，即0s。可定义具体的时间，如 2s。

 

　　三、animation-duration文字闪烁动画实例

　　实例中为动画定义的持续时间为两秒（2s），也就是说一个关键帧内的所有动作在两秒内完成，动画为先文字显现，然后不断的闪烁。

　　html代码：

　　<div class="div"><h3>CSS3动画属性<br />animation-duration</h3></div>

　　CSS代码：

　　<style type="text/css">
　　.div{position:relative;overflow:hidden;width:200px;height:160px;border:1px solid #ab9595;background-color:#e3e2e0;text-align:center;
 animation:text-animation 2s ease-out infinite forwards;}

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

@keyframes: text-animation{

0%{opacity:0;}
30%{opacity:0.25;}
40%{opacity:0.5;}
60%{opacity:1;}
62%{opacity:1; color:Red;}
64%{opacity:1; color:Blue;}
66%{opacity:1; color:Red;}
68%{opacity:1; color:Blue;}
70%{opacity:1; color:Red;}

72%{opacity:1; color:Blue;}
74%{opacity:1; color:Red;}

76%{opacity:1; color:Blue;}
78%{opacity:1; color:Red;}
80%{opacity:1; color:Yellow;}

82%{opacity:1; color:Red;}
84%{opacity:1; color:Yellow;}

86%{opacity:1; color:Red;}

88%{opacity:1; color:Yellow;}
90%{opacity:1; color:Red;}

92%{opacity:1; color:Yellow;}
100%{opacity:1; color:Green;}
}
　　</style>

　　效果图：