CSS로 애니메이션 로딩 텍스트 만들기

이것은 원래 codinhood.com에 게시되었습니다.

로딩 애니메이션은 사용자가 어떤 작업이 완료되기를 기다리고 있을 때 시각적 피드백을 제공하는 좋은 방법입니다. 이 튜토리얼에서는 텍스트를 위아래로 물결처럼 움직이게 하여 로딩 애니메이션 역할을 하는 한 가지 방법을 배웁니다.

HTML 및 CSS 설정

텍스트를 그룹으로 애니메이션화하는 경우 모든 문자를 하나의 요소에 넣을 수 있습니다. 하지만 이 애니메이션에서는 각 문자가 별도로 애니메이션되어야 하므로 각 문자를 자체 요소로 분리해야 합니다.

<div class="container">
  <div class="loading">
    <div class="loading__letter">L</div>
    <div class="loading__letter">o</div>
    <div class="loading__letter">a</div>
    <div class="loading__letter">d</div>
    <div class="loading__letter">i</div>
    <div class="loading__letter">n</div>
    <div class="loading__letter">g</div>
    <div class="loading__letter">.</div>
    <div class="loading__letter">.</div>
    <div class="loading__letter">.</div>
  </div>
</div>

container 클래스는 페이지의 텍스트를 중앙에 배치하고 배경색을 정의합니다. loading 클래스는 flex-direct: row를 사용하여 loading_letter 요소를 행으로 렌더링합니다.

.container {
  height: 100vh;
  background: #773d8c;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading {
  display: flex;
  flex-direction: row;
}

마지막으로 텍스트에 대한 몇 가지 기본 스타일을 정의합니다. 글꼴 Audiowide는 Google Fonts에서 구할 수 있습니다.

@import url(https://fonts.googleapis.com/css?family=Audiowide);

.loading__letter {
  font-size: 88px;
  font-weight: normal;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-family: "Audiowide";
  color: #fec468;
}

텍스트 애니메이션 로드 중

@keyframe 애니메이션은 translateY 변환 기능을 사용하여 각 문자를 위로 40 픽셀 이동한 다음 다시 0 픽셀로 이동합니다. 애니메이션의 최고점을 50% 또는 애니메이션 중간에 정의할 수 있지만 최고점을 조금 더 일찍( 40% ) 정의하고 애니메이션을 조금 더 일찍( 80% ) 마무리하면 각 반복 사이에 약간의 일시 중지.

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(-40px);
  }
  80%,
  100% {
    transform: translateY(0px);
  }
}

바운스로 설정된 .loading_letter, animation-name로 설정된 animation-duration 및 2s에서 animation-iteration-count로 infinite 클래스를 업데이트합니다.

.loading__letter {
  font-size: 88px;
  font-weight: normal;
  letter-spacing: 4px;
  text-transform: uppercase;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

정확히 동일한 타이밍으로 각 문자에 동일한 애니메이션을 추가하므로 문자가 그룹으로 애니메이션됩니다.



웨이브 애니메이션을 만들려면 문자를 차례로 또는 순차적으로 애니메이션해야 합니다. 각 문자에 대해 동일한 증분으로 증가하는 animation-delay를 추가하여 CSS에서 이 작업을 수행할 수 있습니다. 첫 번째 문자는 즉시 시작되고 두 번째 문자는 지연0.1초, 세 번째 문자0.2초 등으로 시작됩니다. 마지막으로 위치를 전달하여 nth-child(num) 의사 클래스를 사용하여 CSS의 각 문자를 선택할 수 있습니다.

.loading__letter:nth-child(2) {
  animation-delay: 0.1s;
}
.loading__letter:nth-child(3) {
  animation-delay: 0.2s;
}
.loading__letter:nth-child(4) {
  animation-delay: 0.3s;
}
.loading__letter:nth-child(5) {
  animation-delay: 0.4s;
}
.loading__letter:nth-child(6) {
  animation-delay: 0.5s;
}
.loading__letter:nth-child(7) {
  animation-delay: 0.6s;
}
.loading__letter:nth-child(8) {
  animation-delay: 0.8s;
}
.loading__letter:nth-child(9) {
  animation-delay: 1s;
}
.loading__letter:nth-child(10) {
  animation-delay: 1.2s;
}

다른 지연 증분으로 재생해 보거나 animation-timing-function와 같은 다른 ease-in-out를 시도하고 애니메이션에 어떤 영향을 미치는지 확인하십시오.