CSS3动画在屏幕显示时开启animate动画

适配大屏幕电脑

···
// 监听滚动事件，加载动画
var slection2Top = $(".selection2")[0].offsetTop;
var slection3Top = $(".selection3")[0].offsetTop;
var slection4Top = $(".selection4")[0].offsetTop;
var slection5Top = $(".selection5")[0].offsetTop;
var slection6Top = $(".selection6")[0].offsetTop;
window.onscroll = function(){
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
if(scrolltop+window.screen.height- 610 >slection2Top ){
$('.selection2 .select-1').show().addClass('rollIn');
$('.selection2 .select-2').show().addClass('flipInY');
}
if(scrolltop+window.screen.height- 610 >slection3Top ){
$('.selection3 .select-1').show().addClass('flipInX');
$('.selection3 .select-2').show().addClass('flipInY');
}
if(scrolltop+window.screen.height- 610 >slection4Top ){
$('.selection4 .select-1-1').show().addClass('fadeInLeft');
$('.selection4 .select-1-2').show().addClass('fadeInLeft');
$('.selection4 .select-2').show().addClass('flipInX');
}
if(scrolltop+window.screen.height- 610 >slection5Top ){
$('.selection5 .select-1').show().addClass('fadeInRight');
$('.selection5 .select-2').show().addClass('fadeInRight');
$('.selection5 .select-3').show().addClass('fadeInRight');
$('.selection5 .select-4').show().addClass('fadeInRight');
$('.selection5 .select-5').show().addClass('fadeInRight');
$('.selection5 .select-6').show().addClass('fadeInLeft');
}
if(scrolltop+window.screen.height- 300 >slection6Top ){
$('.selection6 .downbtn').show().addClass('fadeInUp');
$('.selection6 .down').show().css({animation:'scaleanima 0.6s'});
}
};

···