スクロールして表示するとフェードイン

通常

HTML

<div class="animation">フェードインするコンテンツ</div>

CSS

/*アニメーション要素のスタイル*/
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active-in{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

jquery

$(function(){
        $(window).on('load scroll',function (){
          $('.animation').each(function(){
            //ターゲットの位置を取得
            var target = $(this).offset().top;
            //スクロール量を取得
            var scroll = $(window).scrollTop();
            //ウィンドウの高さを取得
            var height = $(window).height();
            //ターゲットまでスクロールするとフェードインする
            if (scroll > target - height){
              //クラスを付与
              $(this).addClass('active-in');
            }
          });
        });
});

ブロックに時間差を付けるとき

HTML

<div class="flowpanel">
  <div class="ani1"> </div>
  <div class="ani2"> </div>
  <div class="ani3"> </div>
  <div class="ani4"> </div>
  <div class="ani5"> </div>
</div>

CSS

.flowpanel > div {
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: 1s;
}
.flowpanel > div.active-in {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.flowpanel > div.ani1.active-in {
  transition-delay: 0;
}
.flowpanel > div.ani2.active-in {
  transition-delay: 0.5s;
}
.flowpanel > div.ani3.active-in {
  transition-delay: 1s;
}
.flowpanel > div.ani4.active-in {
  transition-delay: 1.5s;
}
.flowpanel > div.ani5.active-in {
  transition-delay: 2s;
}
.flowpanel > div.ani6.active-in {
  transition-delay: 2.5s;
}

jquery

//アニメーション
$(function(){
  $(window).on('load scroll',function (){
    $('.flowpanel　>　div').each(function(){
      //ターゲットの位置を取得
      var target = $(this).offset().top;
      //スクロール量を取得
      var scroll = $(window).scrollTop();
      //ウィンドウの高さを取得
      var height = $(window).height();
      //ターゲットまでスクロールするとフェードインする
      if (scroll > target - height){
        //クラスを付与
        $(this).addClass('active-in');
      }
    });
  });
});