두 원이 돌아가는 애니메이션

두 원이 움직이는 애니메이션

codepen에서 두 원이 한 방향으로 움직이는 애니메이션을 만들어보았습니다.

01. HTML

두 원과 애니메이션을 주기 위한, 부모박스가 있습니다.

     <div class="loading">
        <span class="circle1"></span>
        <span class="circle2"></span>
    </div>  

02. css

동그란 두 원을 만들고 위치값을 설정해준 뒤, rotate로 빙빙 돌아가게 만들어줍니다.

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