애니메이션03

 

애니메이션 03

회전하면서 도는 애니메이션을 만들어 보자!

See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen.

---

HTML

&ltdiv class="wrapper"&gt
&ltdiv&gt&lt/div&gt
&lt/div&gt
&ltdiv class="wrapper"&gt
&ltdiv&gt&lt/div&gt
&lt/div&gt
&ltdiv class="wrapper"&gt
&ltdiv&gt&lt/div&gt
&lt/div&gt
&ltdiv class="wrapper"&gt
&ltdiv&gt&lt/div&gt
&lt/div&gt
&ltdiv class="wrapper"&gt
&ltdiv&gt&lt/div&gt
&lt/div&gt

---

CSS

* {
    box-sizing: border-box;
  }
  body {
    background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin : 0;
    padding : 0;
  }
  .wrapper{
    position: absolute;
    animation: x 0.5s 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(0px);
    }
    75%{
      transform:translatey(50px);
    }
  }