<ul>
  <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li>
  <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li>
  <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li>
  <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li>
  <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li>
  <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li>
</ul>

ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 750px;
	margin: 0 auto;
	padding: 50px 25px;
}
li{
	width: 48%;
	margin: 0 0 100px;
}
img{
	width: 100%;
	height: auto;
}
/*アニメーション要素のスタイル*/
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

$(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');
			}
		});
	});
});