애니메이션 숫자 카운트 돌아가기

 

이렇게 숫자가 카운트 자동으로 돌아가게 하기 

 

---

 

 

 

html 태그를 숫자 왼쪽과 오른쪽으로 나누어

class 를  공통으로 변경할수 있게 지정한다.

 

 

---

멈추는 숫자가 맨 위로 올수 있도록 

차례대로 나열해준다. 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

display flex 으로 배치해주면 아래로 쭉 나열됨

overflow hidden 으로 감춰준다.

 

 

---

@keyframes moveNumber {
  /* transform: translateY(calc(-100% + 116px));*/
  /* em 은 폰트크기를 따라가기 때문에 모바일에서 같이 줄어들도록 조정*/
  /* 폰트크기를 기준으로 할 경우 */
  0% {
    transform: translateY(calc(-100% + 1.44em));
  }
  100% {
    transform: translateY(0);
  }
}

.main_about .about .number .number_list .left {
  transform: translateY(0);
}
.main_about.active .about .number .number_list .left {
  animation: 3s moveNumber forwards;
}

한줄 간격으로 위에서 아래로 내려오도록 calc 로 높이만큼 빼주고 보여지는 숫자 높이만큼 더해준다. 

이떄 높이는 글자 높이 em 단위로 사용 

---

 

반대로 오른쪽은 아래에서 위로 올라오도록 배치 해준다. 

이때 키프레임 이름을 다르게 지정해줘야함

@keyframes moveNumber2 {
  /* 0을 안하면 스크롤이 넘어갈때 시작위치가 변경됨 */
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% + 1.44em));
  }
}

.main_about .about .number .number_list .right {
  transform: translateY(calc(-100% + 1.44em));
}
.main_about.active .about .number .number_list .right {
  animation: 3s moveNumber2 forwards;
}

---

그럼 서로 반대 방향에서 숫자가 카운트 됨을 알수 있다.