title: CSS3 + Jquery animation on scroll
body: <p>I have a set of icons that I want to be visible one by one using animations slideLeft when it scroll down. I'm found this css3 animations</p>
  
  <p><a href="http://www.justinaguilar.com/animations/index.html#" rel="nofollow noreferrer">http://www.justinaguilar.com/animations/index.html#</a></p>
  
  <p>Here is a fiddle of it <a href="http://jsfiddle.net/aJLrj/" rel="nofollow noreferrer">JS FIDDLE</a></p>
  
  <p><img src="https://i.stack.imgur.com/WPuDA.png" alt="enter image description here"></p>
  
  <p>This is my HTML </p>
  
  <pre><code>                    &lt;div id="create" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20 slideLeft"&gt;
                          &lt;img src="//placehold.it/80x80" alt="folder" class="img-circle"&gt;
                          &lt;div class="clear"&gt;&lt;/div&gt;
                          &lt;i class="fa fa-user fa-5x m-t10"&gt;&lt;/i&gt;
                          &lt;h4&gt;Create an account&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div id="define" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20 slideLeft"&gt;
                          &lt;img src="//placehold.it/80x80" alt="folder" class="img-circle"&gt;
                          &lt;div class="clear"&gt;&lt;/div&gt;
                          &lt;i class="fa fa-pencil-square-o fa-5x m-t10"&gt;&lt;/i&gt;
                          &lt;h4&gt;Define your API&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div id="sync" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20 slideLeft"&gt;
                          &lt;img src="//placehold.it/80x80" alt="folder" class="img-circle"&gt;
                          &lt;div class="clear"&gt;&lt;/div&gt;
                          &lt;i class="fa fa-refresh fa-5x m-t10"&gt;&lt;/i&gt;
                          &lt;h4&gt;Sync the local client&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div id="cloud" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20 slideLeft"&gt;
                          &lt;img src="//placehold.it/80x80" alt="folder" class="img-circle"&gt;
                          &lt;div class="clear"&gt;&lt;/div&gt;
                          &lt;i class="fa fa-cloud fa-5x m-t10"&gt;&lt;/i&gt;
                          &lt;h4&gt;Get data from the cloud&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div id="scale" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20 slideLeft"&gt;
                          &lt;img src="//placehold.it/80x80" alt="folder" class="img-circle"&gt;
                          &lt;div class="clear"&gt;&lt;/div&gt;
                          &lt;i class="fa fa-bar-chart-o fa-5x m-t10"&gt;&lt;/i&gt;
                          &lt;h4&gt;Scale as required&lt;/h4&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>This is my CSS for the icons.</p>
  
  <pre><code>#create, #define, #sync, #cloud, #scale
  {
  visibility:hidden;
  }
  </code></pre>
  
  <p>This is my Jquery.</p>
  
  <pre><code>        $(window).scroll(function() {
      $('#create').each(function(){
      var imagePos = $(this).offset().top;
  
      var topOfWindow = $(window).scrollTop();
          if (imagePos &lt; topOfWindow+400) {
              $(this).addClass("slideLeft");
          }
      });
  });
  
  $(window).scroll(function() {
      $('#define').each(function(){
      var imagePos = $(this).offset().top;
  
      var topOfWindow = $(window).scrollTop();
          if (imagePos &lt; topOfWindow+400) {
              $(this).addClass("slideLeft");
          }
      });
  });
  
  $(window).scroll(function() {
      $('#sync').each(function(){
      var imagePos = $(this).offset().top;
  
      var topOfWindow = $(window).scrollTop();
          if (imagePos &lt; topOfWindow+400) {
              $(this).addClass("slideLeft");
          }
      });
  });
  
  $(window).scroll(function() {
      $('#cloud').each(function(){
      var imagePos = $(this).offset().top;
  
      var topOfWindow = $(window).scrollTop();
          if (imagePos &lt; topOfWindow+400) {
              $(this).addClass("slideLeft");
          }
      });
  });
  
  $(window).scroll(function() {
      $('#scale').each(function(){
      var imagePos = $(this).offset().top;
  
      var topOfWindow = $(window).scrollTop();
          if (imagePos &lt; topOfWindow+400) {
              $(this).addClass("slideLeft");
          }
      });
  });
  </code></pre>
  
  <p>It's working but my problem is, I want to be visible one by one every 3 or 5 seconds.</p>
  
  <p>Please help</p>