[ CSS ] 로딩 애니메이션 구현

위와 같은 로딩 애니메이션을 구현해보자. 굉장히 간단해서 딱히 설명할건 없다... 전체 코드는 이 글의 끝에서 확인할 수 있다. 

 

구현 순서는 아래와 같다. 

 

1. 정적인 점 세 개 생성
2. 애니메이션 적용

 

정적인 점을 생성하는 것은 생략하고, 애니메이션을 어떻게 적용해야 하는지만 살펴보자. 우선 점 세 개에 적용되는 애니메이션은 하나를 제외하고 전부 동일하다. 바로 animation-delay다. 따라서 사실상 공통적으로 적용되는 애니메이션만 구현하면 된다. 

 

애니메이션에 사용되는 속성은 두 가지다. 뭐가 바뀌는지 자세히 보자. 정답은 '크기'와 '투명도'임을 쉽게 알 수 있다. 투명도는 0에서 1로 변하고, 크기는 작아졌다가 커지고 있다. 따라서 opacity와 transform을 사용하면 된다. 

 

@keyframes loading {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

 

 

마지막으로 점 세 개 각각의 애니메이션 delay를 몇초로 줄지만 결정하면 된다. 간격이 일정해야 자연스러울 것이다. 결과 코드를 참고하자.

 

 

 

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.