[React, CSS] 텍스트에 애니메이션 구현(FadeIn : 나타나기)

 

여는 글

---

 

애니메이션 구현방식에는 크게 JavaScript랑 CSS가 있는 것 같은데 차이점은 JavaScript는 좀 더 적용범위가 넓고 구현할 수 있는 기능이 다양하다, CSS는 구현이 쉽다 정도라고 한다.

 

이번에 메인페이지를 구현하면서 CSS에 익숙해진 만큼 끝까지 CSS를 사용하기로 하고 다른 페이지를 구현할 때는 최대한 JavaScript를 사용해보기로 했다.

 

 

CSS 텍스트 나타나기 효과

---

 

구현이 매우 쉽다.

 

App.js

class Profile extends Component {
  
  render() {
    return(
       
    <div className="fadein">

      <h1> ⸢ 2019 한국형 사물이미지 인공지능 학습데이터 활용 아이디어 공모전 ⸥ 우수상</h1>
      <h1> 2021년 2월 19일, 컴퓨터공학과 학사 취득</h1>
      <h1> 2021년 자격증 취득</h1>
      <h1> 2021년 9월 토익 000점</h1><br></br>
      <h1> #98년생 #ISTP #취미는_Unity_공부</h1>

   </div>

    );
  }
}

 

나는 h1에 적용했다.

 

App.css

.fadein{
  font-size: medium;
  position: relative;
  overflow: hidden;
  animation: fadein 7s ease-in-out;


}


@keyframes fadein{
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: none;
  }

}

 

출처  

CSS 글 목록이 아래에서 위로 올라오는 기능 fadeIn

 

 

닫는 글

---

 

이번 구현부터 모바일화면도 같이 띄워놓고 구현하기 시작했는데 둘 다 신경쓰려니 확실히 오래걸린다.

 

거의 동적으로만 개발해야하니 결과적으론 좋을 것 같긴 하다.

 

 

 

모든 코드(GitHub)와 포트폴리오 주소

웹 애플리케이션 포트폴리오(Full Stack)