<div class="hero-anim">
  <div class="col-1">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
  </div>
  <div class="col-2">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
  </div>
</div>

body {
  overflow: hidden;
}

.hero-anim {
  display: flex;
  justify-content: space-between;
  width: 400px;
  margin-left: auto;
}

.col-1,
.col-2 {
  width: calc(50% - 10px);
}

.col-2 {
  margin-top: -100px;
}

.child {
  background-color: #47cf73;
  height: 200px;
  margin-bottom: 20px;
  animation: move 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  border-radius: 0 50px 0 50px;
}

@for $i from 1 through 10 {
  .col-1 .child:nth-child(#{$i}) {
    animation-delay: 33ms * $i;
  }
}

@for $i from 1 through 10 {
  .col-2 .child:nth-child(#{$i}) {
    animation-delay: 100ms + 33ms * $i;
  }
}

@keyframes move {
  0% {
    transform: translateY(0);
  }
  70%,
  100% {
    transform: translateY(-660px);
  }
}