版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sakenc/article/details/87913828
动画–过渡延迟时间 transition-delay
transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。
有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay
html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>10动画--过渡延迟时间 transition-delay</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="wrapper">
<div><span>请把鼠标放我这儿</span></div>
</div>
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 400px;
height: 400px;
margin: 100px auto;
border:2px dotted #906;
}
.wrapper div{
width:200px;
height:200px;
line-height:200px;
text-align:center;
font-size:20px;
color:#fff;
background-color:#90F;
/* transition-property:all;
transition-duration:3s;
transition-timing-function:linear;
transition-delay:1s;*/
transition:all 3s ease-in;
/*transition:all 1s ease-in .1s;*/
/* -webkit-transition:all 1s ease-in .1s;
-moz-transition:all 1s ease-in .1s;*/
}
.wrapper div:hover{
width:300px;
height:300px;
background-color:#F39;
}