How can I make the animation run in sequence?

Question

css

Hello everyone, I use animate.css to create animation, so I have 5 icons, how to make them pop out one by one? I will provide a screenshot and code, I didn’t fill it in jsfiddle, since there are no links to pictures, only on a computer

</div>
   <div id="lg">
    <div class="container">
      <div class="row centered wow slideInLeft">
        <div class="col-lg-2 col-lg-offset-1" data-wow-delay="0,5s">
          <center><img src="img/school.png" alt=""><p>dfjsbdfjsbdfjsdf</p></center>
        </div>
        <div class="col-lg-2" data-wow-delay="0,5s">
          <center><img src="img/quality.png" alt=""><p>dfjsbdfjsbdfjsdf</p></center>
        </div>
        <div class="col-lg-2" data-wow-delay="0,5s">
          <center><img src="img/engineer.png" alt=""><p>dfjsbdfjsbdfjsdf</p></center>
        </div>
        <div class="col-lg-2" data-wow-delay="0,5s">
          <center><img src="img/calendar-with-a-clock-time-tools.png" alt=""><p>dfjsbdfjsbdfjsdf</p></center>
        </div>
        <div class="col-lg-2" data-wow-delay="0,5s">
          <center><img src="img/deposit.png" alt=""><p>dfjsbdfjsbdfjsdf</p></center>
        </div>
      </div>
    </div>
  </div>

#lg{
  background: url('../img/section1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 70px;
  padding-bottom: 70px;
  text-align: center;
}
#lg h4{
  padding-bottom: 25px;
  color: white;
  font-size: 40px;

}
#lg p{
  text-align: center;
  color: white;
  padding: 5px;
}

Answer 1

slideInLeft is set not to the container, but to each block with an icon separately. Next, use the animation-delay css property for each icon and set the delay.

.ico1 {animation-delay: 0;}
.ico2 {animation-delay: .5s;}
.ico3 {animation-delay: 1s;}
.ico4 {animation-delay: 1.5s;}
.ico5 {animation-delay: 2s;}

Answer 2

Some weird code.
First, doesn't animate.css need an animated class on the right element?
Secondly, you want the elements to appear in turn, but you hang the animation class on the container instead of them. So it won't work for sure.
Thirdly, center has not been used for 50 years already, probably, it is not necessary to do this. Use CSS for centering. Well, selectors by id are like that.
In general, you just need to set the animation-delay different for each element.
More or less like this

Answer 3

</div>
   <div id="lg">
    <div class="container">
      <div class="row centered">
        <div class="col-lg-2 col-lg-offset-1">
          <center><img src="img/school.png" class="wow slideInLeft" data-wow-delay=".5s"  alt=""><p>dfjsbdfjsbdfjsdf</p></center>
        </div>
        <div class="col-lg-2">
          <center><img src="img/quality.png" class="wow slideInLeft" data-wow-delay=".8s" alt=""><p>dfjsbdfjsbdfjsdf</p></center>
        </div>
        <div class="col-lg-2">
          <center><img src="img/engineer.png" class="wow slideInLeft" data-wow-delay="1.1s" alt=""><p>dfjsbdfjsbdfjsdf</p></center>
        </div>
        <div class="col-lg-2">
          <center><img src="img/calendar-with-a-clock-time-tools.png" class="wow slideInLeft" data-wow-delay="1.4s" alt=""><p>dfjsbdfjsbdfjsdf</p></center>
        </div>
        <div class="col-lg-2">
          <center><img src="img/deposit.png" class="wow slideInLeft" data-wow-delay="1.7s" alt=""><p>dfjsbdfjsbdfjsdf</p></center>
        </div>
      </div>
    </div>
  </div>