为什么我的延迟没有效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css进度条</title>
<style type="text/css">
/* Put your CSS code in the left column, instead of example, to put or remove unnecessary prefixes. */#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: #fff;
}
#loading .imag{
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
@-webkit-keyframes myfirst{
0%,40%,100%{ -webkit-transform: scaleY(0.25); transform: scaleY(0.25); }
20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
}
@keyframes myfirst{
0%,40%,100%{ -webkit-transform: scaleY(0.25); transform: scaleY(0.25); }
20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
}
.imag i{
width: 6px;
height: 50px;
display: block;
float: left;
margin: 0 2px;
background-color: #ccc;
-webkit-transform: scaleY(0.25);
-ms-transform: scaleY(0.25);
transform: scaleY(0.25);
-webkit-animation: myfirst 1.2s infinite;
animation: myfirst 1.2s infinite;
}
.img i：nth-child(2){ -webkit-animation-delay: 0.1s; animation-delay: 0.1s;}
.img i：nth-child(3){ -webkit-animation-delay: 0.2s; animation-delay: 0.2s;}
.img i：nth-child(4){ -webkit-animation-delay: 0.3s; animation-delay: 0.3s;}
.img i：nth-child(5){ -webkit-animation-delay: 0.4s; animation-delay: 0.4s;}
</style>
</head>
<body>
<div id="loading">
<div>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</body>
</html>
