一个 图片 滚动 飞入的css特效

 @keyframes bounceInLeft { ???????from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);} ???????0% {opacity: 0;transform: translate3d(-3000px, 0, 0);} ???????60% {opacity: 1;transform: translate3d(25px, 0, 0);} ???????75% {transform: translate3d(-10px, 0, 0);} ???????90% {transform: translate3d(5px, 0, 0);} ???????100% {opacity: 1;transform: none;} ???}@keyframes bounceInRight { ???????from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);} ???????0% {opacity: 0;transform: translate3d(3000px, 0, 0);} ???????60% {opacity: 1;transform: translate3d(-25px, 0, 0);} ???????75% {transform: translate3d(10px, 0, 0);} ???????90% {transform: translate3d(-5px, 0, 0);} ???????100% {opacity: 1;transform: none;} ???}.page5-tu1,.page5-tu2,.page5-tu3,.page5-tu4{ ???????position: absolute; ???????width: REM(480); ???????height: REM(206); ???????left: 50%; ???????margin-left: REM(-240); ???????opacity: 0; ???} ???.page5-tu1{ ???????bottom: REM(778); ???????animation: bounceInLeft 0.5s 0.25s linear forwards; ???} ???.page5-tu2{ ???????bottom: REM(548); ???????animation: bounceInLeft 0.7s 0.45s linear forwards; ???} ???.page5-tu3{ ???????bottom: REM(314); ???????animation: bounceInRight 0.9s 0.65s linear forwards; ???} ???.page5-tu4{ ???????bottom: REM(81); ???????animation: bounceInRight 1.1s 0.85s linear forwards; ???}

(function animateUp(){ ???????var obj = $(‘.CfadeInUp‘); ???????var objH= $(‘.CfadeInUp‘).outerHeight(); ???????var num = []; ???????var wH ?= $(window).height(); ???????var wScrollTop = $(window).scrollTop(); ???????// 获取页面所有obj的top位置，存入数组 ???????for(var i=0; i<obj.length;i++){ ???????????num.push(obj.eq(i).offset().top+(objH/3)); ???????} ???????// 循环数组，判断obj的位置是否在可视区中 ???????function judgeTop(){ ???????????for(var j=0; j<num.length;j++){ ???????????????if (num[j] >= wScrollTop && num[j] < (wScrollTop+wH)) { ???????????????????obj.eq(j).css({ ???????????????????????‘animation-name‘:‘bounceInRight‘, ???????????????????????‘opacity‘:‘1‘ ???????????????????}); ???????????????} ???????????} ???????}; ???????// 触发滚动事件调用判断函数 ???????$(window).scroll(function(event) { ???????????wH = $(window).height(); ???????????wScrollTop = $(window).scrollTop(); ???????????judgeTop(); ???????}); ???})();