Как сделать так, чтобы анимация поочередно шла?

Question

[Lord Drous]

Всем привет, использую animate.css для создания анимации, вот у меня есть 5 иконок, как сделать так , чтобы они по очереди вылазили? предоставлю скрин и код, в jsfiddle не залил, так как нету ссылок на картинки, только на компе

</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 задать не контейнеру, а отдельно каждому блоку с иконкой. Далее, воспользоваться css свойством animation-delay, для каждой иконки и задать задержку.

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

Answer 2

[Gortyser]

Какой-то странный код.
Во-первых, разве для animate.css не нужен класс animated на нужном элементе?
Во-вторых, вы хотите, чтобы по очереди появлялись элементы, но класс с анимацией вешаете на контейнер вместо них. Так точно ничего не выйдет.
В-третьих, center не используется лет 50 уже, наверно, не нужно так делать. Используйте CSS для центрирования. Ну и селекторы по id - это такое.
А вообще просто нужно задать animation-delay разный для каждого элемента.
Примерно так

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>