yuheijotaki.com

◯HTML

<div class="fadein"></div>
<div class="fadein"></div>
<div class="fadein"></div>

 
◯JS

var scroll = $(window).scrollTop();
var window_height = $(window).innerHeight();
var window_bottom = scroll + window_height;
$('.fadein').each(function(){
	var fadein_pos = $(this).offset().top - 1;
	if ( fadein_pos < window_bottom ) {
		$(this).addClass('fadein_anime');
	}
});

 
◯CSS

.fadein {
	opacity: 0;
}
.fadein_anime {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 2s;
	-ms-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-delay: .5s;
	-ms-animation-delay: .5s;
	animation-delay: .5s;
	-webkit-animation-name: fadein_anime;
	animation-name: fadein_anime;
	visibility: visible !important;
}
@-webkit-keyframes fadein_anime {
	0% {
		opacity: 0;
		-webkit-transform: translate(0,20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate(0,0);
	}
}
@keyframes fadein_anime {
	0% {
		opacity: 0;
		-ms-transform: translate(0,20px);
		transform: translate(0,20px);
	}
	100% {
		opacity: 1;
		-ms-transform: translate(0,0);
		transform: translate(0,0);
	}
}