定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
延迟和循环只需设置delay和animation-iteration-count，可以简写在animation属性里面，也可以单独使用animation-delay和animation-iteration-count设置
例如
div{
animation:mymove 5s infinite
-webkit-animation:mymove 5s infinite /* Safari 和 Chrome */
}
在.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>
我使用setTimeout() 来延时一秒，但没有效果，不知道什么地方出错了，现列出基本代码，请大家指正。首先，在DIV中添加了鼠标动作：<DIV id="xiexiedajia" onmouseover="showlink()" onmouseout="closelink()">
Javascript代码如下
JavaScript code
?
1
2
function closelink(){window.setTimeout('closel()',1000)}
function closel(){document.getElementById("xiexiedajia").style.display="none"}
实现延时一秒的作用是当用户将鼠标点在菜单并往右移动时，偶尔可能移出菜单，这时候菜单就会消失，用户又要重新点开菜单，很不爽，希望能够在鼠标移出很短时间内菜单仍旧存在，这时候用户鼠标又移入时菜单还在。
当用户将鼠标移出超过1秒后就认为用户本身不想使用菜单了，这时候菜单就消失。
