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

旧城等待， 2022-06-01 07:57 179阅读 0赞

先看从左边和右边飞入的效果：  
![这里写图片描述][SouthEast]  
图片的html代码是：

重要的样式代码是：

@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部分控制动态，拷贝就可以用了。  
然后看看从顶部进入效果：  
![这里写图片描述][SouthEast 1]  
我们将注意力集中在折这张图片上就可以了。  
html代码是：

然后是重要的样式代码：

@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)这个缩放的属性。

[SouthEast]: /images/20220601/c201ac1bac3a40cb83c72f7e352fd045.png
[SouthEast 1]: /images/20220601/dce27483432a4f5aa784587bbebd7506.png