CSS：アニメーション演出・基本

下から上にせり上がってくるアニメーション設定

.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeUpAnime{
  from {
	opacity: 0;
	transform: translateY(30px);
  }

  to {
	opacity: 1;
	transform: translateY(0);
  }
}

画面が一定量スクロールされた時にアニメーションがスタートするJavaScript

function fadeAnime(){
	// ふわっ
	$('.fadeUpTrigger').each(function(){ //fadeUpTriggerというクラス名が
	var elemPos = $(this).offset().top-30;//要素より、50px上の
	var scroll = $(window).scrollTop();
	var windowHeight = $(window).height();
	if (scroll >= elemPos - windowHeight){
	$(this).addClass('fadeUp');// 画面内に入ったらfadeUpというクラス名を追記
	}else{
	$(this).removeClass('fadeUp');// 画面外に出たらfadeUpというクラス名を外す
	}
	});
}

※ この場合CSS側にトリガー（きっかけ）が必要なので、トリガーとしてのクラスを作っておく

.fadeUpTrigger{
	opacity: 0;
}

アニメーション関連リンク
https://www.webcreatorbox.com/blog/web-animations-api