make a loading icon according to the example on the Internet. I would like to ask if my css3 animation is only added to the first wrapper, why does the second wrapper also have an impact and jump up and down? What is the reason for this?
<body>
<div class="wrapper">
<div class="load-1">
pic1
<div class="k-line k-line1-1"></div>
<div class="k-line k-line1-2"></div>
<div class="k-line k-line1-3"></div>
<div class="k-line k-line1-4"></div>
<div class="k-line k-line1-5"></div>
</div>
</div>
<div class="wrapper2">
<div class="">
pic2
<div class="k-ring">
<div class="k-dot k-dot-1"></div>
<div class="k-dot k-dot-2"></div>
<div class="k-dot k-dot-3"></div>
</div>
</div>
</div>
</body>body{
padding: 0;
margin: 0;
}
.wrapper{
width: 100px;
height: 100px;
padding: 20px;
margin:0 10px 10px 0;
background: -sharpd8d8d8;
border-radius: 5px;
display: inline-block;
}
.wrapper2{
width: 100px;
height: 100px;
padding: 20px;
margin:0 10px 10px 0;
background: -sharpd8d8d8;
border-radius: 5px;
display: inline-block;
}
.k-line{
width: 15px;
height: 15px;
border-radius: 15px;
background: -sharp4b9cdb;
display: inline-block;
}
/* .k-line1-1{
animation: k-loadingA 1.5s 0s infinite;
background:-sharp1E88E5;
}
.k-line1-2{
animation: k-loadingA 1.5s 0.2s infinite;
background: -sharp2196F3;
}
.k-line1-3{
animation: k-loadingA 1.5s 0.4s infinite;
background: -sharp42A5F5;
}
.k-line1-4{
animation: k-loadingA 1.5s 0.6s infinite;
background: -sharp64B5F6;
}
.k-line1-5{
animation: k-loadingA 1.5s 0.8s infinite;
background: -sharp90CAF9;
} */
@keyframes k-loadingA{
0{
height:15px
}
50%{
height:35px
}
100% {
height:15px
}
}