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;
    animation: spin 1s linear infinite;
}
@keyframes spin{
    0%  {transform: rotate(0) scale(1.1);}
    50% {transform: rotate(180deg) scale(0.8);}
    100%{transform: rotate(360deg) scale(1.1);}
}

.row {
    display: flex;
    flex: 0 1 100%;
}
.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;}
.row:nth-child(11) .circle {animation-delay: 1100ms;}
.row:nth-child(12) .circle {animation-delay: 1200ms;}