animation控制图片从左飞入、右飞入、顶飞入等动态

先看从左边和右边飞入的效果：

图片的html代码是：

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

重要的样式代码是：

@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;
    }

具体的布局代码就不贴出来了，主要是animation部分控制动态，拷贝就可以用了。
然后看看从顶部进入效果：

我们将注意力集中在折这张图片上就可以了。
html代码是：

class="page2_p4" src="./images/page2_p4.png" />

然后是重要的样式代码：

@keyframes fadeInBig{
    from{opacity: 0;transform: scale(2.5);}
        to{opacity: 1;transform: scale(1);}
}
.page2_p4{
            width: REM(164);
            height: REM(114);
            position: absolute;
            bottom: REM(194);
            left: 50%;
            margin-left: REM(-58);
            opacity: 0;
            animation: fadeInBig 1.5s 2s linear forwards;
            -webkit-animation: fadeInBig 1.5s 2s linear forwards;
}

重点是transform: scale(2.5)这个缩放的属性。