CSS3 animation动画,循环间的延时执行该怎么弄

html-css012

CSS3 animation动画,循环间的延时执行该怎么弄,第1张

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

经查询以及和使用过的人交流可以知道,应该这样进行设置,animation-delay 属性定义动画什么时候开始。

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>