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动画