[무작정 따라하기] 얘! 코가 커졌다 작아졌다하는 로딩 화면이란다 : CSS animation

5342 단어 CSShtmlcss animationCSS

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

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

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

위와 같은 애니메이션을 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>
  • CSS
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 사이에 애니메이션 중간 상태를 적어넣을 수 있다. 완성된 모습은 아래와 같다.

이미지도 되더라.

코 이미지가 왜 내 컴퓨터에 저장되어있는진 모르겠다맨이야;

"알아왔지 말입니다."

이렇게 CSS 애니메이션에 대해 알아보고 어떤 부분이 잘 안되는지 팀원 분께 물어보려던 찰나

이미 문제를 해결하신 뒤였다. (우리 팀에서 제일 쓸모없는 나...)
덕분에 모르고 있었던 CSS 공부를 한 나였다.

취준 회고록
[R, 빅분기] 혼동행렬을 통한 모형 평가

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage