CSS Animation - Wave

<div class="circles">
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
    <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
    <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
    <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
    <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
    <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
    <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
    <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
    <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
    <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</div>

body {
  height: 100vh;
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  display: flex;
  align-items: center;
  /* 상하로 가운데로 정렬 */
  justify-content: center;
  /* 좌우로 가운데로 정렬 */
}

.circle {
  width: 10px; height: 10px;
  background: #fff;
  margin: 5px 10px;
  border-radius: 50%;
  transform-origin: top center;
  /* transform-origin은 요소의 움직임 방향을 정의한다. */
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0%   {transform: rotate(0) scale(1.0)}
  50%  {transform: rotate(180deg) scale(2.0)}
  100% {transform: rotate(0) scale(3.0)}
}

.row {
  display: flex;
  flex: 0 1 100%;
  /* flex: flex-grow flex-shrink flex-basis 순으로 작성한다. */
  /* 박스의 크기(flex-basis)와 그 크기가 변경되는 방식(flex-grow, flex-shrink)을 정의 */
}

.row:nth-child(1) .circle {animation-delay: 100ms;}
.row:nth-child(2) .circle {animation-delay: 200ms;}
.row:nth-child(3) .circle {animation-delay: 300ms;}
.row:nth-child(4) .circle {animation-delay: 400ms;}
.row:nth-child(5) .circle {animation-delay: 500ms;}
.row:nth-child(6) .circle {animation-delay: 600ms;}
.row:nth-child(7) .circle {animation-delay: 700ms;}
.row:nth-child(8) .circle {animation-delay: 800ms;}
.row:nth-child(9) .circle {animation-delay: 900ms;}
.row:nth-child(10) .circle {animation-delay: 1000ms;}