                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /常用的網(wǎng)頁加載進度條

為什么我的延遲沒有效果

<!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>