[CSS] 키프레임 애니메이션으로 만든 로딩 애니메이션

See the Pen 로딩 모양 by summermong (@summermong) on CodePen.

 

크게 어려운 건 없고 CSS 애니메이션을 어떻게 사용하는지 배웠다.

원형 로딩의 경우 span 모두를 inline-block으로 만들어 한 줄에 정렬하고 퍼센테이지에 따라 투명도와 스케일을 조절하는 애니메이션을 만들었다. 이 때 이 애니메이션을 적용할 때 animation delay를 걸어서 시작할 때 약간씩 시간차를 두면 천천히 로딩되는 화면을 구현할 수 있다.

---

See the Pen 네모 모양 by summermong (@summermong) on CodePen.

 

사각형으로 만든 로딩 화면은 약간 더 복잡하다.

현재 움직일 사각형 2개를 담을 수 있는 부모 사각형이 일단 있다 치고, 처음에는 부모 사각형의 좌측 상단에서 시작되게 한다. 좌측 상단 > 우측 상단 > 우측 하단 > 좌측 하단 > 좌측 상단으로 다시 돌아오는 형태인데 이를 애니메이션으로 만들면 0%, 25%, 50%, 75%, 100%로 단계를 나눌 수 있다.

 

이 단계별로 위치를 조절하는데, 100%를 하면 딱 부모 요소의 바깥에 붙게 되니 거기서 자식 요소의 크기만큼을 빼주면 쏙 들어가게 된다. 이 때 calc을 쓰는데, 이 함수를 쓰면 계산식을 속성 값으로 부여할 수 있다. 위치를 바꿀 때마다 색도 변경하면 된다.

 

calc() - CSS: Cascading Style Sheets | MDN

---

퍼블리싱에 큰 힘 들이지 말라는 이야기를 많이 들었는데

공부가 안 될땐 이렇게 꼬물꼬물 뭐라도 만들어보면 동기 부여도 되고 재미도 있고 조오타