完整代码如下:
<!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>
delay只针对第一次有效,貌似没有其他属性可以直接控制循环间隔,不过可以修改keyframes里的百分比,比如你原本的动画0%到100%,完成需要3s,间隔3s。那么将50%到100%的动画效果改成一样(相当于静止),再将完成时间改为6s。