애니메이션 빙글빙글

⭐️ 애니메이션 효과 : 빙글빙글 점 둘 ⭐️

---

01. 애니메이션 효과

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다.
애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다.

   ___ 참고하기 ___
  `1   @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다.

---

02. 점 두 개가 빙글 도는 효과 만들기

[1] < div > 박스 만들기

div 안에 span 으로 점 두 개를 만들어 줍니다.

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

---

[2] CSS 설정하기

@keyframes 을 이용하여 애니메이션의 움직임을 조절합니다.

  body {
    height: 100vh;
    background-image: linear-gradient(180deg, #191970 0%, #4B0082 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:	#FFF5EE;
  }
  
  .loading .circle2 {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background:	#F0F8FF;
    margin-top: 110px;      // 점 겹치지 않게 떨어뜨려 놓기
  }
  
  @keyframes loading {
    0% {
      transform: translate(-50%, -50%) rotate(0deg)
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg)
    }
  }

결과보기