잔상 공 애니메이션

잔상 공

잔상이 반복적으로 생기는, 움직이는 공 애니메이션을 만들어 봅시다.

---

HTML

공을 5개 만들어 봅시다.

<div class="wrapper">
    <div></div>
</div>
<div class="wrapper">
    <div></div>
</div>
<div class="wrapper">
    <div></div>
</div>
<div class="wrapper">
    <div></div>
</div>
<div class="wrapper">
    <div></div>
</div>

CSS

linear-gradient : 적용된 HTML 요소에 선형으로 그래디언트(gradient) 효과를 적용시켜 줍니다.
ease-in-out 빠르게 시작하여 점점 천천히 동작합니다.
alternate : 순방향으로 애니메이션을 시작해 역방향과 순방향으로 번갈아 애니메이션을 진행.
keyframes을 만든 뒤, transform으로 움직임을 부여합니다.

*  {
    box-sizing: border-box;
}
body {
    background: linear-gradient(to top, #E38B29 0%, #FDEEDC 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;
    height: 40px;
    width: 40px;
    opacity:0.8;
}
.wrapper:nth-of-type(3)>div{
    animation-delay: 0.2s;
    height: 30px;
    width: 30px;
    opacity:0.6;
}
.wrapper:nth-of-type(4)>div{
    animation-delay: 0.3s;
    height: 20px;
    width: 20px;
    opacity:0.4;
}
.wrapper:nth-of-type(5)>div{
    animation-delay: 0.4s;
    height: 10px;
    width: 10px;
    opacity:0.2;
}
  
@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);
    }
}

결과

See the Pen Untitled by kimyihyung (@kimyihyung) on CodePen.