一个 图片 滚动 飞入的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;
    }

<div class="travelType">
<img class="page5-tu1" src="./images/p5_tu1.png" name="travel1"/>
<img class="page5-tu2" src="./images/p5_tu2.png" name="travel2"/>
<img class="page5-tu3" src="./images/p5_tu3.png" name="travel3"/>
<img class="page5-tu4" src="./images/p5_tu4.png" name="travel4"/>
</div>

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

原文地址：https://www.cnblogs.com/caozengling/p/9253419.html