애니메이션 02

애니메이션 02

돌고 도는 애니메이션을 만들어 보자!

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

---

HTML

&ltdiv class="loading">
&ltspan class="circle1">&lt/span>
&ltspan class="circle2">&lt/span>
&lt/div>

CSS

body {
    height: 100vh;
    background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%)
  }
  .loading {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 150px;
    animation: loading 0.5s ease 1000;
  }
  .loading .circle1 {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff5858;
  }
  .loading .circle2 {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f09819;
    margin-top: 110px;
  }
  @keyframes loading {
    0% {
      transform: translate(-50%, -50%) rotate(0deg)
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg)
    }
  }