Alexander Hanke

<div id="bars">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
     usw. 21 div's
</div>

#bars {
  top: 40%;
  left: 45%;
  width: 100%;
  height: 80px;
  position: absolute;
}
.bar {
  bottom: 0px;
  height: 5px;
  width: 5px;
  position: absolute;
  background: #A4B555;
  animation: bar 0s -1.2s linear infinite alternate;
}
@keyframes bar {
  0% {
     opacity: .2;
     height: 5px;
  }
  100% {
     opacity: 1;
     height: 80px;
  }
}

.bar:nth-child(1) { left: 0px;  animation-duration: 475ms; background-color: #F2A828; }
.bar:nth-child(2) { left: 6px;  animation-duration: 435ms; background-color: #A4B555; }
.bar:nth-child(3) { left: 12px; animation-duration: 405ms; background-color: #F2A828; }
.bar:nth-child(4) { left: 18px; animation-duration: 455ms; background-color: #A4B555; }
.bar:nth-child(5) { left: 24px; animation-duration: 400ms; background-color: #F2A828; }
.bar:nth-child(6) { left: 30px; animation-duration: 425ms; background-color: #A4B555; }
.bar:nth-child(7) { left: 36px; animation-duration: 445ms; background-color: #F2A828; }
.bar:nth-child(8) { left: 42px; animation-duration: 415ms; background-color: #A4B555; }
.bar:nth-child(9) { left: 48px; animation-duration: 485ms; background-color: #F2A828; }
.bar:nth-child(10) { left: 54px; animation-duration: 395ms; background-color: #A4B555; }
.bar:nth-child(11) { left: 60px; animation-duration: 465ms; background-color: #F2A828; }
.bar:nth-child(12) { left: 66px; animation-duration: 435ms; background-color: #A4B555; }
.bar:nth-child(13) { left: 72px; animation-duration: 405ms; background-color: #F2A828; }
.bar:nth-child(14) { left: 78px; animation-duration: 455ms; background-color: #A4B555; }
.bar:nth-child(15) { left: 84px; animation-duration: 400ms; background-color: #F2A828; }
.bar:nth-child(16) { left: 90px; animation-duration: 425ms; background-color: #A4B555; }
.bar:nth-child(17) { left: 96px; animation-duration: 445ms; background-color: #F2A828; }
.bar:nth-child(18) { left: 102px; animation-duration: 475ms; background-color: #A4B555; }
.bar:nth-child(19) { left: 108px; animation-duration: 485ms; background-color: #F2A828; }
.bar:nth-child(20) { left: 114px; animation-duration: 395ms; background-color: #A4B555; }
.bar:nth-child(21) { left: 120px; animation-duration: 465ms; background-color: #F2A828; }