CSS 애니메이션 - 움직이는 공2

애니메이션 만들기

css 애니메이션을 만들어 봅니다!

애니메이션 : 움직이는 공

잔상이 뒤따르는 움직이는 공 애니메이션을 만들어 봅니다.

*{
  box-sizing:border-box;
}
body {
  background: linear-gradient(to top, #1212aa 0%, #6060dd 100%);
  width:100vw;
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.wrapper{
  position: absolute;
  animation: x 1s ease-in-out alternate infinite 0s both;
}
.wrapper:nth-of-type(2){
  animation-delay: 0.1s;
}
.wrapper:nth-of-type(3){
  animation-delay: 0.2s;
}
.wrapper:nth-of-type(4){
  animation-delay: 0.3s;
}
.wrapper:nth-of-type(5){
  animation-delay: 0.4s;
}
.wrapper > div {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 100%;
  margin: 40px;
  animation: y 1s linear infinite 0s both;
}
.wrapper:nth-of-type(2) > div {
  animation-delay: 0.1s;
  opacity: 0.8;
  height: 40px;
  width: 40px;
}
.wrapper:nth-of-type(3) > div {
  animation-delay: 0.2s;
  opacity: 0.6;
  height: 30px;
  width: 30px;
}
.wrapper:nth-of-type(4) > div {
  animation-delay: 0.3s;
    opacity: 0.4;
  height: 20px;
  width: 20px;
  }
.wrapper:nth-of-type(5) > div {
  animation-delay: 0.4s;
  opacity: 0.2;
  height: 10px;
  width: 10px;
}
@keyframes x {
  0%{transform : translatex(-100px) }
  100%{transform : translatex(100px) }
}
@keyframes y {
  25%{transform: translatey(-50px)}
  0%,50%,100%{transform: translatey(0)}
  75%{transform: translatey(50px)}
}