CSS Animation -tail

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

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는 움직임의 방향을 순방향을 진행 후 역방향으로 설정 
  //infinite는 애니메이션 반복 횟수를 무한으로 설정 
}
.circle > div {
  background: #fff;
  width: 50px; height: 50px;
  border-radius: 50%;
  animation: movey 1s linear infinite;
  //linear 처음 속도와 마지막 속도가 일정하게
}
.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;}
//nth-of-type은 같은 형태일경우에만 사용하며, 자식요소가 다른 형태일경우에는 nth-child를 사용해야한다. 

.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: 1;}
  75%  {transform: translate(0,100px);}
  100% {transform: translate(0,0);}
}