[22-12-30 TIL] animate.css 사용하기

animate.css를 사용하면 이미 만들어진 애니메이션을 쉽게 갖다 쓸 수 있다.

1. 준비운동

컴퓨터에서 애니메이션이 잘 보이는지 확인해야된다.
https://animate.style/ 에 가서 애니메이션이 보이는지 확인한다.
만약 정지 화면이 보인다면 아래와 같은 문구가 나올 것이다.

Hey! It seems that you have animations disabled on your OS, turning Animate.css off.
Animate.css supports the prefers-reduced-motion CSS media feature. You can read more about it here.

이럴때는 사진처럼 시스템 속성을 변경하면 해결된다.

2. 사용

사이트에 사용법이 적혀있다.
터미널에 npm install animate.css --save
를 입력해서 설치한다.

애니메이션을 사용하려는 파일 안에 import 'animate.css';를 입력하고
element 클래스 이름에 사용하려는 animation이름을 적으면 된다.
animate__애니메이션이름 이런식으로.

<h1 class="animate__animated animate__bounce">An animated element</h1>

애니메이션이 끝난 후 특정 동작을 하고싶다면
element에 addEventListener를 걸면 된다.

ref.current?.addEventListener("animationend", () => { });