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

html-css07

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

.要执行动画的属性名 {nametime动画特性outtime循环次数}

以上为特定的语法格式

name : 表示 动画名称,可自定义

time : 表示 动画持续的时间 比如 2S ,注意,“s”要大写

动画特性,具体参考css3手册,比如可放置,线性动动,或其它运动

outtime: 延迟时间 ,格式和time 一样

循环次数:可以是具体的数,不带单位,可以是无限循环,单词忘了,看手册

在.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>