CSS3 for loading effects

The expected implementation effect is as follows

First, the basic HTML layout is as follows

  <div id= "wrap" >
    <div class= "line1" ></div>
    <div class= "line2" ></div>
    <div class= "Line3" ></div>
    <div class= "line4" ></div>
    <div class= "Line5" >< /div>
  </div>

For the CSS code below
First set the basic style

#wrap {
  width:400px;
  height:400px;
  position:relative;
  margin:150px auto;
}
#wrap Div {
    width:8px;
    height:50px;
    Background-color:pink;
    Float:left;
    margin-left:1px;
    border-radius:10%;
}

Once the CSS style definition is complete, there will be five neatly lined strips on the page.

Then we'll add the animation effect
Add the following code to the #wrap div

-webkit-animation:fadeout 1s infinite ease-in-out;

The code for fadeout is as follows

@-webkit-keyframes FadeOut {
  0,
  40%,
  100% {
    -webkit-transform:scaley (0.4);
  }
  20% {
    -webkit-transform:scaley (1);
  }
}

This time, the small strips on the page are moving neatly.

So now it's time to use Animation-delay to set the animation's trigger, to achieve the original effect

#wrap. line1 {
  -webkit-animation-delay: -0.9s;
}
#wrap. line2 {
  -webkit-animation-delay: -0.8s;
}
#wrap. line3 {
  -webkit-animation-delay: -0.7s;
}
#wrap. line4 {
  -webkit-animation-delay: -0.8s;
}
#wrap. line5 {
  -webkit-animation-delay: -0.9s;
}

The above results are achieved in the first diagram.