在延迟样式，如果选择器不加div几个圆就会一齐发生变化，没有延迟效果
加div
<!donctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style>
*{
margin:0;
padding:0;
}
.outer{
height:500px;
border-bottom:10px black solid;
overflow:hidden;
}
.outer div{
float:left;
height:100px;
text-align:center;
font-size:50px;
margin-right:10px;
width:100px;
border-radius:50%;
line-height:100px;
animation:ball 1s forwards linear infinite alternate;
}
div.box1{
background-color:#1af;
animation-delay:.1s;
}
div.box2{
background-color:#1af;
animation-delay: .2s;
}
div.box3{
background-color:#1af;
animation-delay: .3s;
}
div.box4{
background-color:#1af;
animation-delay: .4s;
}
div.box5{
background-color:#1af;
animation-delay:.5s;
}
div.box6{
background-color:#1af;
animation-delay:.6s;
}
div.box7{
background-color:#1af;
animation-delay:.7s;
}
div.box8{
background-color:#1af;
animation-delay:.8s;
}
div.box9{
background-color:#1af;
animation-delay:.9s;
}
@keyframes ball{
from{
margin-top:0;
}
to{
margin-top:400px;
}
}
</style>
</head>
<div class="outer">
<div class="box1">!</div>
<div class="box2">!</div>
<div class="box3">!</div>
<div class="box4">!</div>
<div class="box5">!</div>
<div class="box6">！</div>
<div class="box7">!</div>
<div class="box8">!</div>
<div class="box9">！</div>
</div>
</body>
</html>
