body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}
.circle {
    position: absolute;
    animation: movex 1s ease-in-out alternate infinite;
}
/*alternate = normal + reverse*/
.circle > div {
    background: #fff;
    width: 50px; height: 50px;
    border-radius: 50%;
    animation: movey 1s linear infinite;
}
/*nth-child 는 type이 달라도 된다.*/
.circle:nth-of-type(2) > div {width: 40px; height: 40px; opacity: 0.8;}
.circle:nth-of-type(3) > div {width: 30px; height: 30px; opacity: 0.6;}
.circle:nth-of-type(4) > div {width: 20px; height: 20px; opacity: 0.4;}
.circle:nth-of-type(5) > div {width: 10px; height: 10px; opacity: 0.2;}

.circle:nth-of-type(2),
.circle:nth-of-type(2) > div {animation-delay: 0.1s;}
.circle:nth-of-type(3),
.circle:nth-of-type(3) > div {animation-delay: 0.2s;}
.circle:nth-of-type(4),
.circle:nth-of-type(4) > div {animation-delay: 0.3s;}
.circle:nth-of-type(5),
.circle:nth-of-type(5) > div {animation-delay: 0.4s;}

@keyframes movex {
    0%  {transform: translate(-100px, 0);}
    100%{transform: translate(100px, 0);}
    }
    
@keyframes movey {
    0% {transform: translate(0, 0);}
    25% {transform: translate(0, -100px);}
    50% {transform: translate(0, 0); border-radius: 0;}
    75% {transform: translate(0, 100px);}
    100%{transform: translate(0, 0);}
}