SOURCE

<div id="main_banner">
  <div class="bg bg_item1"></div>
  <div class="bg bg_item2"></div>
  <div class="bg bg_item3"></div>
  <div class="bg bg_item4"></div>
  <div class="bg bg_item5"></div>
</div>

#main_banner {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .5);
}

.bg {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, .5);
  animation: itemMove 1.5s ease-in-out alternate infinite;
}

.bg_item1 {
  top: 20%;
  left: 60%;
}

.bg_item2 {
  top: 30%;
  left: 40%;
  animation-delay:.5s
}

.bg_item3 {
  top: 25%;
  left: 45%;
  animation-delay:.3s
}

.bg_item4 {
  top: 30%;
  left: 50%;
  animation-delay:.3s
}

.bg_item5 {
  top: 40%;
  left: 30%;
  animation-delay:.5s
}

@keyframes itemMove {
  0% {
    transform: translateY(25px);
  }
  100% {
    transform: translateY(0px);
  background: rgba(255, 255, 255, 1);
  }
}