SOURCE

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
  <div class="box6"></div>
</div>
<div class="box7"></div>

* {
  margin: 0;
  padding: 0
}
.box {
  background-color: #000;
  width: 200px;
  height: 300px;
  display: flex;
}
.box div {
  width: 20px;
  margin-left: 5px;
  height: 200px;
  align-self: flex-end;
  background-color: #fff;
  animation: move 1s ease-in infinite 1s;
}
.box div:hover {
  background-color: red
}
.box div:nth-child(2n+1) {
  height: 160px;
  animation: move1 1s ease-in infinite 1.5s;
}

@keyframes move {
  0% {
    height: 200px;
  }
  50% {
    height: 50px;
  }
  100% {
    height: 200px;
  }
}
@keyframes move1 {
  0% {
    height: 160px;
  }
  50% {
    height: 70px;
  }
  100% {
    height: 160px;
  }
}
.box7 {
  width: 200px;
  height: 200px;
  background-color: red;
  transform: translate(100px, 20px)
}