css 延时几秒代码,CSS3 会聚展开文字动画实例及animation-delay属性规则

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

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

一、animation-delay语法规则

animation-delay：[, * ]

二、语法说明

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

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

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

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

2、animation-delay 取值如下：

：设置动画延迟时间。

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

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

html代码：

CSS3 动 画

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;}

}

效果图：

CSS3动画