CSS3制作动画（animation属性及文字重落闪光实例）

　　CSS3一突出的亮点就是可以制作动画，它新增了制作动画属性animation，利用这个属性可以制作元素（如 div、ul li、p、span 等）、文字动画。既可制作几个元素的协作动画，也可制作一个元素的动画；既可以设置动画循环次数，也可以设置为无限循环。

　　动画就实体对象的移动变化，所以除用animation属性外，还要用translate（移动）、opacity（透明度）等属性。因此用CSS3制作动画之前，应该对它们有所了解，特别是 translate，它也新增的属性。为便于理解CSS3是如何制作动画的，我们先看animation的语法规则，再看具体的实例。

 

　　一、animation语法规则

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

　　<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

 

　　二、语法说明

　　1、animation 可以设置多组动画效果

　　A、<single-animation> 表示第一组动画效果，不能省略；

　　B、[]中的 <single-animation> 表示第二组动画效果，可以省略；

　　C、* 表示第三组、第四组、……第n组动画效果，可以省略；

 

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

　　<single-animation-name>：设置动画名称；

　　<animation-duration>(<time>)：设置动画持续时间；

　　<animation-timing-function>：设置动画的过渡类型，共有9种过渡类型：linear（线性过渡），ease（平滑过渡），ease-in（由慢到快），ease-out（由快到慢），ease-in-out（由慢到快再到慢），step-start（相当于步进函数 steps(1, start)），step-end（相当于步进函数 steps(1, end),steps（步进函数），cubic-bezier（贝塞尔曲线）；

　　<animation-delay>(<time>)：设置动画延迟时间；

　　<animation-iteration-count>：设置动画循环次数，无限循环设置为infinite；

　　<animation-direction>：设置动画在循环中是否反向运动；

　　<animation-fill-mode>：设置动画时间之外的状态；

　　<animation-play-state>：设置动画的状态，取值为running（运动）、paused（暂停）。W3C正考虑是否将该属性移除，因为动画的状态可以通过其它方式实现，例如重设样式。

 

　　三、animation文字重落闪光实例

　　实例中的动画使用了CSS3另外两个属性：transform、translate，和一个透明度属性，opacity；如果对 transform、translate 不了解，可先大概了解一它的特性，简单的说就是移动实体。

　　html代码：

　　<div class="div"><h3 class="textAnimation">CSS3 动画效果</h3></div>

　　CSS代码：

　　<style type="text/css">
　　.div{position:relative;overflow:hidden;width:300px;height:200px;border:1px solid #ab9595;background-color:#e3e2e0;text-align:center;}
　　
.textAnimation{transform:translate(0px);
animation:Css3-Animation 2s ease-out infinite backwards;
}

@keyframes: Css3-Animation{
0%{transform:translate(0, 50px);opacity:0;}

10%{transform:translate(0, 100px);opacity:0.5;}

30%{transform:translate(0, 100px);opacity:1; font-size:36px; color:Red;}
32%{transform:translate(0, 100px);opacity:1; font-size:36px; color:Yellow;}
35%{transform:translate(0, 100px);opacity:1; font-size:36px; color:Red;}
37%{transform:translate(0, 100px);opacity:1; font-size:36px; color:Yellow;}

40%{transform:translate(0, 100px);opacity:1; font-size:36px; color:Red;}
80%{transform:translate(0, 50px);opacity:1; font-size:24px; color:Green;}
100%{transform:translate(0, 50px);opacity:0;}
}
　　</style>

　　效果图：