CSS 애니메이션 만들기 : 빙글빙글 돌아가는 원

CSS 애니메이션 : 빙글빙글 돌아가는 원

오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다.

---

1. HTML 소스

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

돌아가는 원을 두 개 만들 것이기 때문에, circle 이름을 가진 span 태그를 두 개 작업해 주었습니다.

2. 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 1s ease infinite;
}
.loading .circle1 {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}
.loading .circle2 {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  margin-top: 110px;
}
@keyframes loading {
  0% {transform: translate(-50%, -50%) rotate(0deg)}
  100% {transform: translate(-50%, -50%) rotate(360deg)};
}

loading은 두 개의 원을 연결하는 가상의 하나의 막대입니다. 즉, 빙글빙글 돌아가는 무색의 막대의 양 끝에 원 두개가 달려있다고 생각하면 됩니다. 애니메이션 속성 중, ease는 속도에 관한 설정으로, 천천히 시작되고 속도가 줄어들면서 끝나는 효과를 추가하는 것입니다. 그 다음에 오는 infinite는 반복 횟수를 의미합니다.

위의 HTML, CSS 소스를 합치면 애니메이션이 완성됩니다. 간단하죠?