얘! 코가 커졌다 작아졌다하는 로딩 화면이란다 : CSS animation

DANO PARK·2022년 4월 19일

CSS

무작정 따라하기

목록 보기

1/9

오랜만의 운동으로 그만 뻗어버린 나...

기절(?)해 있었는데 메가바이트 스쿨에서 같이 듣는 팀원 분의 카톡으로 겨우 일어날 수 있었다.

팀원 분께서 연락하신 이유는

위와 같은 애니메이션을 CSS로 나타내는 방법을 물어보기 위함이었다.

~~당시 질문받은 내 표정~~

'CSS보다 차라리 자바스크립트가 낫다!'라고 생각하던 나에게, 게다가 막 잠에서 깨 비몽사몽한 나에겐 '이게... 뭐지?'라는 생각뿐이었다. 그냥 '잘 모르겠네요ㅎㅎ'하고 수업 시간 전까지 꿀잠을 즐길 수도 있겠지만, 왜 그런 말도 있지 않은가

"모르면 군 생활 끝나냐?"

내 코딩 생활은 끝나면 안되기 때문에 컴퓨터 앞으로 가서 바로 구글링을 시도했다. 이게 뭔지도 모르는 상태였지만, 그래도 여차저차해서 CSS의 animation이라는 기능을 사용해야 한다는 것을 알게 되었다.

CSS animation 사용하기

animation은 말그대로 화면 상의 콘텐츠들을 움직일 수 있게하는 기능이다. animation과 animation-delay 같은 하위 기능들 그리고 @keyframes로 원하는 모션을 입힐 수 있다.

Animation 하위 속성

animation-name : 애니메이션 이름 지정.
animation-delay : 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정.
animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정.
animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정.
animation-iteration-count : 애니메이션이 몇 번 반복될지 지정.
animation-play-state : 애니메이션을 멈추거나 다시 시작.
animation-timeing-funciton : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정.
animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용.

animation은 아래의 내용처럼 따로 따로가 아닌 한줄로도 작성 가능하다.

div {
animation: name duration timing-function delay iteration-count direction fill-mode;
}

Keyframe으로 애니메이션 중간 상태 지정하기

@keyframes로 전체 애니메이션에서 중간 중간 어떤 애니메이션을 등장시킬지 지정할 수 있다.

예제 : 네모막대가 늘어났다 줄어드는 애니메이션

위에 기술한 내용으로 팀원 분께서 궁금해하시는 애니메이션을 제작할 수 있다.

HTML

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

div {
  width: 10px;
  height: 30px;
  background-color: rgb(59, 209, 217);
  display: inline-block;
  margin: 1px;
  animation: scaling 1s ease-in-out infinite;
}

@keyframes scaling {
  from {
    transform: scaleY(2);
  } to {
    transform: scaleY(1);
  }
}

div:nth-child(1) {
  animation-delay: 0s;
}
div:nth-child(2) {
  animation-delay: .15s
}
div:nth-child(3) {
  animation-delay: .3s
}
div:nth-child(4) {
  animation-delay: .45s;
}
div:nth-child(5) {
  animation-delay: .6s;
}

@keyframes안에 percentage를 이용해 from과 to 사이에 애니메이션 중간 상태를 적어넣을 수 있다. 완성된 모습은 아래와 같다.