CSS3 会聚展开文字动画实例及animation-delay属性规则

　　CSS3中制作动画有两个控制时间的属性，一个是动画持续时间，另一个是动画延迟时间，也就是本篇要讨论的animation-delay属性，它用于控制动画延迟多长时间，也就是打开网页后等待多久动画才开始，当然如果一个动画分为几段，也可用于等待前一段动画执行完后再执行，它的单位为秒（s）。

　　animation-delay属性在animation的取值中排在第四位，排在动画持续时间transition-duration之后，可以省略。下面先看animation-delay的语法规则，再看animation-delay的具体使用实例。

 

　　一、animation-delay语法规则

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

 

　　二、语法说明

　　1、animation-delay 可以设置多个动画延迟时间，默认值为0s

　　A、animation-delay 表示第一个动画延迟时间，可以省略；

　　B、[]中的 animation-delay 表示第二个动画延迟时间，可以省略；

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

 

　　2、animation-delay 取值如下：

　　<time>：设置动画延迟时间。

 

　　三、animation-delay会聚展开文字动画实例

　　以下是一个会聚展开文字动画实例，文字先会聚然后展开排成一行；实例仅用了三个（组）文字，在实际应用中，可以加多个文字。动画在网页打开后，延迟2秒执行。

　　html代码：

　　<div class="div"><span class="text1">CSS3</span><span class="text2">动</span><span class="text3">画</span></div>

　　CSS代码：

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

.text1{animation:animation1 2s ease-out 2s infinite forwards;}

.text2{animation:animation2 2s ease-in 2s infinite forwards;transform:translate(190px, 190px);}

.text3{animation:animation3 2s ease-out 2s infinite forwards;transform:translate(190px, 0);}

 

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

@keyframes animation2{

0%{transform:translate(190px, 190px); opacity:0;}
10%{transform:translate(100px, 100px);opacity:0.25;}
20%{transform:translate(100px, 100px);opacity:0.5; font-size:22px;}
30%{transform:translate(38px, 70px);opacity:1; font-size:52px;}
80%{transform:translate(38px, 70px);opacity:1; font-size:52px;}
100%{transform:translate(38px, 70px); font-size:52px;opacity:1; color:Fuchsia;}

}

@keyframes animation3{
0%{transform:translate(190px, 0); opacity:0;}
10%{transform:translate(100px, 100px);opacity:0.25;}
20%{transform:translate(100px, 100px);opacity:0.5; font-size:22px;}
30%{transform:translate(40px, 70px);opacity:1; font-size:52px;}
80%{transform:translate(40px, 70px);opacity:1; font-size:52px;}
100%{transform:translate(40px, 70px); font-size:52px;opacity:1; color:Fuchsia;}

}
　　</style>

　　效果图：