CSS3小球掉落依次排列动画

布局思路：

1、先在一个大盒子里建立三个小盒子来储存图片

2、为大盒子绝对定位脱标，然后再将图片脱标集中在一起

3、先为三个图片添加公共动画，其中：

4、为三个图片分别添加向左、向右以及原地不动的动画

<div id="wrap">
        <div class="pic1"><img src="./img/1.png" alt=""></div>
        <div class="pic2"><img src="./img/2.png" alt=""></div>
        <div class="pic3"><img src="./img/3.png" alt=""></div>
    </div>

 样式：

body,div{
            margin: 0;
            padding: 0;
        }
        body{
            color: aliceblue;
        }
        #wrap{
            width: 580px;
            height: 143px;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
        }
        #wrap img{
            width: 160px;
        }
        #wrap div{
            float: left;
            margin-right: 50px;
        }
        /* 给三个小盒子添加定位，让他们最初出现在哪，和布局没有关系，和要做的弹跳的位置有关系 */
        .pic1,.pic2,.pic3{
            /* 绝对定位目的：让三个小盒子都在一个位置出现 */
            position: absolute;
            left: 50%;
            margin-left: -80px;
        }
        
        .pic1{
            z-index: 5;
            /* jumper1 动画名称
            0.5s 动画完成时间
            ease-in 动画以慢速开始
            1 动画完成次数
            forwars 停留在动画最后一帧 */
            animation: 
            jumper1 0.5s ease-in 1 forwards,
            /* jumper2 动画名称
            0.2s 动画完成时间
            ease-out 动画以慢速结束
            0.5s 动画推迟0.5s运行
            1 动画完成次数
            forwars 停留在动画最后一帧 */
            jumper2 0.2s ease-out 0.5s 1 forwards,
            jumper3 0.2s ease-in 0.7s 1 forwards,
            jumper4 0.15s ease-out 0.9s 1 forwards,
            jumper5 0.15s ease-in 1.05s 1 forwards,
            leftmove 0.4s ease-out 1.2s 1 forwards;
        }
        .pic2{
            z-index: 2;
            animation: 
            jumper1 0.5s ease-in 1 forwards,
            /* 停留在最后一帧 */
            jumper2 0.2s ease-out 0.5s 1 forwards,
            jumper3 0.2s ease-in 0.7s 1 forwards,
            jumper4 0.15s ease-out 0.9s 1 forwards,
            jumper5 0.15s ease-in 1.05s 1 forwards,
            middle 0.4s ease-out 1.2s 1 forwards;
        }
        .pic3{
            z-index: 3;
            animation: 
            jumper1 0.5s ease-in 1 forwards,
            /* 停留在最后一帧 */
            jumper2 0.2s ease-out 0.5s 1 forwards,
            jumper3 0.2s ease-in 0.7s 1 forwards,
            jumper4 0.15s ease-out 0.9s 1 forwards,
            jumper5 0.15s ease-in 1.05s 1 forwards,
            rightmove 0.4s ease-out 1.2s 1 forwards;
        }
        #wrap div:last-child {
            margin-right: 0;
        }      
        @keyframes jumper1{
            0%{
                transform: translateY(-500px);
            }
            100%{
                transform: translateY(0);
            }
        }
        @keyframes jumper2{
            0%{
                transform: translateY(0);
            }
            100%{
                transform: translateY(-100px);
            }
        }
        @keyframes jumper3{
            0%{
                transform: translateY(-100px);
            }
            100%{
                transform: translateY(0);
            }
        }
        @keyframes jumper4{
            0%{
                transform: translateY(0px);
            }
            100%{
                transform: translateY(-50px);
            }
        }
        @keyframes jumper5{
            0%{
                transform: translateY(-50px);
            }
            100%{
                transform: translateY(0);
            }
        }
        @keyframes middle{
            0%{
                transform: translateX(0);
            }
            100%{
                transform: translateX(0) scale(1.6) rotate(360deg);
            }
        }
        @keyframes rightmove{
            0%{
                transform: translateX(0);
            }
            100%{
                transform: translateX(300px) scale(1.6) rotate(360deg);
            }
        }
        @keyframes leftmove{
            0%{
                transform: translateX(0);
            }
            100%{
                transform: translateX(-300px) scale(1.6) rotate(360deg);
            }
        }

代码演示：