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

                     

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

图片的html代码是：

<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>

• 1
• 2
• 3
• 4
• 5
• 6

重要的样式代码是：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40

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

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

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

• 1

然后是重要的样式代码：

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

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