react Animate.css 사용법

CSS를 이용한다면 다양한 애니메이션 효과를 구현할 수 있다.

그런데 시간도 없고 귀찮다면 어떻게 할까?

 

Animate.css를 사용해보자.

https://animate.style/

Animate.css | A cross-browser library of CSS animations.

 

나는 react에서 사용하려고 한다.

먼저, 설치를 해준다.

 

npm 설치

 

npm install animate.css --save

 

yarn 설치

 

yarn add animate.css

 

 

 

둘 중 편한걸로 설치하면 된다.

 

 

 

다음으로는 import를 해준다.

해당 효과를 사용하기 위한 jsx파일에 해준다.

 

import 'animate.css';

 

 

이제 사용할 효과를 고르면 된다.

오른쪽에 보면 효과를 볼 수 있는데

마우스를 올리면 카피할 수 있는 창이 뜬다.

누르면 카피가 된다.

 

 

<div class="animate__animated">

이게 기본 값인데 이 뒤에 카피한 내용을 붙여넣으면 된다.

 

 

만약 bounce 효과를 적용하고 싶다면

<div class="animate__animated animate__bounce">

이렇게 말이다.

 

그러면 성공적으로 효과가 적용된 것을 볼 수 있다.