SOURCE

<div class="grid">
  <div class="box"> </div>
  <div class="box"> </div>
  <div class="box"> </div>
  <div class="box"> </div>
  <div class="box"> </div>
  <div class="box"> </div>
  <div class="box"> </div>
  <div class="box"> </div>
  <div class="box"> </div>
  <div class="box"> </div>
  <div class="box"> </div>
  <div class="box"> </div>
  <div class="box"> </div>
  <div class="box"> </div>
  <div class="box"> </div>
</div>

body{
  overflow: hidden;
  margin: 0;
  background-color: #FFEBCB;
}

.grid {
  position: absolute;
  margin: auto;
  top:0; bottom:0; left:0; right:0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  align-content: center;
  width: 400px;
  height: 50px;
}

.box {
  bottom:0;
  width: 20px;
  height: 5px;
  background: #F88A00;
  border-radius: 0px;
}

@for $i from 1 to 21 {
  .box:nth-child(#{$i}){
    animation: stretch 2s unquote($i*0.05 + 's') ease infinite;
  }
}

@keyframes stretch {
  20%{
    margin-bottom: 30px;
    height: 70px;
    background: #F6365B;
    border-radius: 60px;
  }
  50%{
    margin-bottom: 0px;
    background: #F88A00;
    
  }
  80%{
    height: 5px;
  }
}