간단한 애니메이션 08

간단한 애니메이션 08

간단한 애니메이션 만들기 여덟번째 시간입니다.
뱅글뱅글 돌아가는 로딩 애니메이션을 만들어보겠습니다.

---

01. HTML

{
    <div class="loader">
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
  </div>
}

---

02. CSS

{
    body {
        background-color: rgb(105,54,199);
      }
      .loader {
        position: absolute;
        top : 50%;
        left : 50%;
        transform : translate(-50%, -50%);
        width: 100px;
        height: 100px;
        animation: spin .6s linear infinite reverse;
      }
      .ball {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        animation: spin 1s infinite ease-in-out;
      }
      .ball:after {
        position: absolute;
        content:'';
        background-color: #fff;
        width: 5px;
        height: 5px;
        border-radius: 100%;
        top: 0;
      }
      .ball:nth-child(2){
        animation-delay: -0.1s;
      }
      .ball:nth-child(3){
        animation-delay: -0.2s;
      }
      .ball:nth-child(4){
        animation-delay: -0.3s;
      }
      .ball:nth-child(5){
        animation-delay: -0.4s;
      }
      .ball:nth-child(6){
        animation-delay: -0.5s;
      }
      .ball:nth-child(7){
        animation-delay: -0.6s;
      }
      .ball:nth-child(8){
        animation-delay: -0.7s;
      }
      .ball:nth-child(9){
        animation-delay: -0.8s;
      }
      .ball:nth-child(10){
        animation-delay: -0.9s;
      }
      
      @keyframes spin {
        0% {
          transform : translate(-50%,-50%) rotate(0deg);
        }
        100% {
          transform : translate(-50%,-50%) rotate(360deg);
        }
      }
}

---

03. 결과물