[CSS] animation, @keyframes를 사용한 화면 전화 CSS

프로젝트 진행 중 페이지 이동 할 때 뚝뚝 끊기는 느낌이 있는 데 스무스 하게 이어지는 느낌으로 변경 해달라는 요청을 받아서 이틀동안 열심히 구글링 해보고, 수정 과정을 거친 결과 animation과 @keyframes를 사용하여 구현했다.

 

🤔 라이브러리 대신 JS/CSS를 사용한 이유는?

: react-transition-group, gatsbyJS 라이브러리 예제를 찾아보고 시도 해봤는 데 내가 원하는 대로 커스텀 하기도 어렵고 과정이 자세히 나온 자료를 찾지 못해서 JS/CSS를 사용하여 가볍고 내가 원하는 모습으로 구현했다.

 

😮 미리보기

animation, keyframe 사용 O

animation, keyframe 사용 X

두개를 비교 해보면 확실히 차이가 보이는 데 사용 전에는 마이페이지, Nav 아이콘 로딩 상태에서 사용자가 이질감을 느낄 수 있었는 데 수정 후에는 그런 모습이 보이지 않고, 페이지가 서로 부드럽게 이동 되어서 좋았던 것 같다.

 

😊 코드

Next.js 라이브러리를 사용하여 프로젝트를 진행하고 있고, JS/HTML로 구현했다.

 

- /pages/_app.js

: useEffect dependency array에 router.pathname을 설정해서, 페이지 경로가 바뀔 때마다 callback 함수가 실행된다.

  useEffect(() => {
    $(".white_bg").css("display", "block");
    $(".white_bg").css("opacity", "0.5");
    $(".white_bg").css("animation", "fadeInOut 0.5s");

    const loading = setTimeout(() => {
      $(".white_bg").css("display", "none");

      return clearTimeout(loading);
    }, 500);
  }, [router.pathname]);

 

- /pages/_app.js (JSX)

 

- /public/css/style.css

.white_bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  z-index: 100;
  transition-property: opacity;
}

@keyframes fadeInOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeInOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

---

@keyframes - CSS: Cascading Style Sheets | MDN

animation - CSS: Cascading Style Sheets | MDN