CSS3 摇摇文字动画实例及animation-iteration-count属性规则

　　打开网页后，动画一般来说会反反复复的重复播放，CSS3中也可以实现这个功能，有一个专用于控制动画循环次数的属性animation-iteration-count，只要设置一个具体数字，例如3，表示动画播放三次就停止，当然也可以设置动画无限循环，像 flash 动画一样，打开网页不断重复播放。

　　animation-iteration-count属性如果省略，动画默认只播放一次，所以想让动画不停的播放，需要把它设置为无限循环。至于如何设置，先看animation-iteration-count的语法规则，再看一个具体的设置实例。

 

　　一、animation-iteration-count语法规则

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

　　<single-animation-iteration-count> = infinite | <number>

 

　　二、语法说明

　　1、animation-iteration-count 可以设置多个动画循环次数，默认值为1

　　A、animation-iteration-count 表示第一个动画循环次数，不能省略；

　　B、[]中的 animation-iteration-count 表示第二个动画循环次数，可以省略；

　　C、* 表示第三个、第四个、……第n个动画循环次数，可以省略；

 

　　2、animation-iteration-count 取值如下：

　　 infinite：设置动画无限循环。

　　 <number>：设置动画循环次数。

 

　　三、animation-iteration-count摇摇文字动画实例

　　以下是一个摇摇文字动画实例，文字一边显现，一边向右下角运动，在运动过程中摇来摇去。实例中，把动画循环次数设置无限循环，即infinite。

　　html代码：

　　<div class="div"><h3>CSS3摇摇文字动画</h3></div>

　　CSS代码：

　　<style type="text/css">
　　.div{position:relative;overflow:hidden;width:500px;height:200px;font-size:16px;border:1px solid #ab9595;background-color:#e3e2e0;padding:8px;}

.div h3{animation:text-animation 2s ease-out infinite forwards;}

 

@keyframes text-animation{
0%{transform:translate(0, 0); opacity:0;}
10%{transform:skew(-10deg,-10deg);opacity:0.25;}
20%{transform:skew(10deg,10deg);opacity:0.5; font-size:22px;}
30%{transform:skew(-10deg,-10deg);opacity:1; font-size:52px;}
70%{transform:skew(10deg,10deg);opacity:1; font-size:52px;}
80%{transform:skew(-10deg,-10deg);opacity:1; font-size:52px;}
100%{transform:translate(36px, 70px);font-size:52px;opacity:1;color:Fuchsia;}

}
　　</style>

　　效果图：