スクロールしてください。
<br>
↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>
<div class="box1 animated">FadeInDown</div>
<div class="box2 animated">bounceIn</div>
<div class="box3 animated">lightSpeedIn</div>

div {
  text-align:center;
  width:200px;
  padding:50px 0;
  margin:100px auto;
  background:#00BCD4;
  color:#fff;
}

$(function() {
  $('.box1').on('inview', function(event, isInView) {
    if (isInView) {
      $(this).addClass('fadeInDown');
    } else {
      $(this).removeClass('fadeInDown');
      $(this).css('opacity',0);
    }
  });

  $('.box2').on('inview', function(event, isInView) {
    if (isInView) {
      $(this).addClass('bounceIn');
    } else {
      $(this).removeClass('bounceIn');
    }
  });
  
  $('.box3').on('inview', function(event, isInView) {
    if (isInView) {
      $(this).addClass('lightSpeedIn');
    } else {
      $(this).removeClass('lightSpeedIn');
    }
  });
  
});