CodePen

HTML

            
              <section>
  
  <div class="module "></div>
  <div class="module "></div>
  <div class="module "></div>
  <div class="module "></div>
  <div class="module "></div>
  <div class="module "></div>
  <div class="module "></div>
  <div class="module "></div>
  <div class="module "></div>
  <div class="module "></div> 
  <div class="module "></div>
  <div class="module "></div>
  <div class="module "></div>
  <div class="module "></div>


</section>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              section {
  background: #eee;
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

.module {
  background: white;
  float: left;
  margin:10px;
  width:300px;
  float:left;
}


.come-in {
  -webkit-transform: translateY(150px);
  -webkit-animation: come-in 0.8s ease forwards;
  -moz-transform: translateY(150px);
  -moz-animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  -webkit-animation-duration: 0.6s;
  -moz-animation-duration: 0.6s;
}
.already-visible {
  -webkit-transform: translateY(0);
  -webkit-animation: none;
  -moz-transform: translateY(0);
  -moz-animation: none;
}

@-webkit-keyframes come-in {
  to {  -webkit-transform: translateY(0);    
  }
}
@-moz-keyframes come-in {
  to {  -moz-transform: translateY(0);    
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Makes use of the visible plugin
// https://raw.github.com/teamdf/jquery-visible/master/jquery.visible.min.js

var win = $(window);

var allMods = $(".module");

allMods.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.addClass("already-visible"); 
  } 
});

win.scroll(function(event) {
  
  allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("come-in"); 
    } 
  });
  
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................