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>

css

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

代码演示：