想用css3做loading，但是给动画加了infinite后animation-delay：就执行一次，该怎么让整个动画循环呢？谢谢！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>annimate</title>
</head>
<style>
.box{ width:900px;
height:500px;
margin:0 auto;
}
.box_1, .box_2, .box_3, .box_4{ width:15px;
height:15px;
float:left;
margin-left:20px;
margin-top:150px;
border-radius:50%;
background:green
}
.box_1{ animation:color 1s ease-in-out;}
.box_2{ animation:color 1s ease-in-out;
animation-delay:1s;
}
.box_3{ animation:color 1s ease-in-out;
animation-delay:2s;
}
.box_4{ animation:color 1s ease-in-out;
animation-delay:3s;
}
@keyframes color{
0%{ background:green;}
50%{ background:blue;
transform:scale(1.5);}
100%{ background:green;}
}
</style>
<body>
<div class="box">
<div class="box_1">
</div>
<div class="box_2">
</div>
<div class="box_3">
</div>
<div class="box_4">
</div>
</div>
</body>
</html>哪里有 infinite ?
.box_1{
animation:color 4s ease-in-out infinite
}
.box_2{
animation:color 4s ease-in-out infinite;
animation-delay:1s;
}
.box_3{
animation:color 4s ease-in-out infinite;
animation-delay:2s;
}
.box_4{
animation:color 4s ease-in-out infinite;
animation-delay:3s;
}
@keyframes color{
0%{ background:green;}
25%{
background:blue;
transform:scale(1.5);
}
50%, 75%, 100%{ background:green;}
}