animation-delay 值单位可以是秒(s)或毫秒(ms)。
提示: 允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。
语法
animation-delay: time
time可选。定义动画开始前等待的时间,以秒或毫秒计。默认值为0
在.high-title h2 样式后面增加:-webkit-animation-delay:6s animation-delay:6s-webkit-animation-fill-mode: forwards animation-fill-mode: forwards opacity: 0完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body { margin-left: 0pxmargin-top: 0pxmargin-right: 0pxmargin-bottom: 0px}
.high-title h3 { width: 756pxheight: 448pxoverflow: hiddenposition: absolutetop: 20pxleft: 50%margin-left: -328pxz-index: 2opacity: 0-webkit-transition: opacity .5s ease-in-out-moz-transition: opacity .5s ease-in-out-ms-transition: opacity .5s ease-in-outtransition: opacity .5s ease-in-out}
.high-title h3 { opacity: 1-webkit-animation: tmd 1s ease-in-out-moz-animation: tmd 1s ease-in-out-ms-animation: tmd 1s ease-in-outanimation: tmd 1s ease-in-out-moz-animation: tmd 1s ease-in-out-ms-animation: tmd 1s ease-in-out}
.high-title h2 { width: 756pxheight: 448pxoverflow: hiddenposition: absolutetop: 60pxleft: 50%margin-left: -328pxz-index: 2opacity: 0-webkit-transition: opacity .5s ease-in-out-moz-transition: opacity .5s ease-in-out-ms-transition: opacity .5s ease-in-outtransition: opacity .5s ease-in-out}
.high-title h2 { opacity: 1-webkit-animation: tmd 1s ease-in-out-moz-animation: tmd 1s ease-in-out-ms-animation: tmd 1s ease-in-outanimation: tmd 1s ease-in-out-moz-animation: tmd 1s ease-in-out-ms-animation: tmd 1s ease-in-out-webkit-animation-delay:6s animation-delay:6s-webkit-animation-fill-mode: forwards animation-fill-mode: forwards opacity: 0}
@-webkit-keyframes tmd{
0% {
opacity: 0
-webkit-transform: translateX(-20px)
}
100% {
opacity: 1
-webkit-transform: translateX(0)
}
}
@-moz-keyframes tmd {
0% {
opacity: 0
-moz-transform: translateX(-20px)
}
100% {
opacity: 1
-moz-transform: translateX(0)
}
}
@-o-keyframes tmd {
0% {
opacity: 0
-o-transform: translateX(-20px)
}
100% {
opacity: 1
-o-transform: translateX(0)
}
}
@keyframes tmd {
0% {
opacity: 0
transform: translateX(-20px)
}
100% {
opacity: 1
transform: translateX(0)
}
}
</style>
</head>
<body>
<div class="high-title"><h3>第一</h3><h2>第二</h2></div>
</body>
</html>