[CSS]loading animation

테크야끼·2021년 5월 3일

CSS animation keyframes

CSS

목록 보기

4/9

💡학습목표

로딩화면에서 사용되어지는 360도 회전 애니메이션을 @keyframes을 이용해 만드는 것을 통해 CSS의 주요 속성중의 하나인 @keyframes의 문법과 속성을 학습한다.

keyframes를 이용해 loading animation을 만들어보자!

HTML

    <div id="wrap">
      <div id="spinner">
        <p>loading</p>
        <div></div>
        <div></div>
      </div>
    </div>

각각 바깥쪽 원(spinner1)과 안쪽 원(spinner2)이 될 div를 두 개 생성하고 #spinner로 감싸주었다.

CSS

body {
  background: black;
}

/*keyframes group*/

@keyframes textAni {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes spinner1 {
  from {
    transform: scale(1.6) rotate(0deg);
  }

  to {
    transform: scale(1.6) rotate(360deg);
  }
}

@keyframes spinner2 {
  from {
    transform: scale(1.2) rotate(0deg);
  }

  to {
    transform: scale(1.2) rotate(-360deg);
  }
}

#wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#spinner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}

#spinner p {
  color: white;
  font-size: 12px;
  z-index: 500;
  animation: textAni 1s ease-in-out 0s infinite alternate;
}

#spinner div {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

#spinner div:nth-of-type(1) {
  border: 3px solid rgba(110, 240, 50, 0.2);
  animation: spinner1 1s linear 0s infinite;
}

#spinner div:nth-of-type(2) {
  border: 3px solid rgba(110, 240, 50, 0.8);
  animation: spinner2 1s linear 0s infinite;
}

/*스피너의 구멍뚫린 부분*/

#spinner div::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  transform: scale(0.2, 1.2);
}

keyframes

@keyframes spinner1 {
  from {
    transform: scale(1.6) rotate(0deg);
  }

  to {
    transform: scale(1.6) rotate(360deg);
  }
}

@keyframes spinner2 {
  from {
    transform: scale(1.2) rotate(0deg);
  }

  to {
    transform: scale(1.2) rotate(-360deg);
  }
}

스피너의 큰 원과 작은 원을 만들어야 하기 때문에 keyframe을 이용해 scale을 1.6, 1.2 까지 키워주었다.
360도 회전해야 하기 때문에 rotate를 사용해 요소를 0~360도 만큼 회전시킨다.
두개의 원이 동시에 돌면 원하던 느낌이 안나오기 때문에 작은 원은 반대로 회전시켜 자연스럽게 만든다.

#spinner div::after

#spinner div::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  transform: scale(0.2, 1.2);
}

가상선택자 ::after을 이용하여 스피너의 구멍뚫린 부분을 구현했다.

#spinner div::after는 실제로 구멍이 뚫린게 아니라 빨간색 막대처럼 되어있는데 위 아래가 뚫려있는 것 처럼 보이는 시각적인 효과를 준다. 대신 배경색과 같은 색으로 설정해야한다.
#spinner div::after는 height: 100%;를 줘서 크기를 부모영역 만큼 늘린뒤에, transform: scale(0.2, 1.2); 으로 가로 세로 크기를 변경한다.
이 때 scale 중심값이 center center이기 때문에 자동 중앙정렬된다.

💡완성

💡활용

위의 코드를 활용해 세개의 원이 시간차를 두고 회전하는 로딩이미지를 만들어보자!

HTML

    <div id="wrap">
      <div id="spinner">
        <p>loading</p>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>

keyframes

변경된 코드만 작성

@keyframes spinner1 {
  from {
    transform: rotate(0deg) scale(1.2);
  }

  to {
    transform: rotate(360deg) scale(1.2);
  }
}

@keyframes spinner2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spinner3 {
  from {
    transform: rotate(0deg) scale(0.8);
  }

  to {
    transform: rotate(360deg) scale(0.8);
  }
}

3개의 원이 같은 거리로 떨어져있게 scale을 조절했다.

#spinner div {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(110, 240, 50, 0.3);
  border-top-color: rgba(110, 240, 50, 1);
  border-radius: 100%;
}

#spinner div:nth-of-type(1) {
  animation: spinner1 3s infinite 1s both;
}

#spinner div:nth-of-type(2) {
  animation: spinner2 3s infinite 0.5s both;
}

#spinner div:nth-of-type(3) {
  animation: spinner3 3s infinite 0s both;
}