title: Giving delay in animate.css plugin
body: <p>Hi i am using this plugin called animate.css. </p>
  
  <p><a href="http://daneden.github.io/animate.css/" rel="nofollow">http://daneden.github.io/animate.css/</a></p>
  
  <p>I have successfully implemented the animation.. I have 6 icons. I want them to animate one by one in a sequence with a delay of 1 second.. I am not able to achieve the delay in animation. It is all animating at once. Kindly help.</p>
  
  <p>Heres the Html code.</p>
  
  <pre><code>&lt;ul class="top_feat"&gt;
  &lt;li&gt;&lt;img src="images/cc.png" class="revealOnScroll "  data-animation="zoomIn"   &gt;&lt;/li&gt;
  &lt;li&gt;Covered Car Park&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="top_feat"&gt;
  &lt;li&gt;&lt;img src="images/club_house.png" class="revealOnScroll"  data-animation="zoomIn" &gt;&lt;/li&gt;
  &lt;li&gt;Club House&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="top_feat"&gt;
  &lt;li&gt;&lt;img src="images/gym.png"  class="revealOnScroll "  data-animation="zoomIn" &gt;&lt;/li&gt;
  &lt;li&gt;Gymnasium&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="top_feat"&gt;
  &lt;li&gt;&lt;img src="images/rec_hall.png"  class="revealOnScroll "  data-animation="zoomIn" &gt;&lt;/li&gt;
  &lt;li&gt;Recreation Hall&lt;/li&gt;
  &lt;/ul&gt; 
  </code></pre>
  
  <p>and heres the jquery for it.</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
  
    var $window           = $(window),
        win_height_padded = $window.height() * 1.1,
        isTouch           = Modernizr.touch;
  
    if (isTouch) { $('.revealOnScroll').addClass('animated'); }
  
    $window.on('scroll', revealOnScroll);
  
    function revealOnScroll() {
      var scrolled = $window.scrollTop(),
          win_height_padded = $window.height() * 1.1;
  
      // Showed...
      $(".revealOnScroll:not(.animated)").each(function () {
        var $this     = $(this),
            offsetTop = $this.offset().top;
  
        if (scrolled + win_height_padded &gt; offsetTop) {
          if ($this.data('timeout')) {
            window.setTimeout(function(){
              $this.addClass('timeout');
            }, parseInt($this.data('timeout'),10));
          } else {
            $this.addClass('animated ' + $this.data('animation'));
          }
        }
      });
      // Hidden...
     $(".revealOnScroll.animated").each(function (index) {
        var $this     = $(this),
            offsetTop = $this.offset().top;
        if (scrolled + win_height_padded &lt; offsetTop) {
          $(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
        }
      });
    }
  
    revealOnScroll();
  });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Thank you.</p>