웹사이트에 애니메이션 간단하게 주기 - animate.css

 

 

 

 

 

 

이번 포스팅에서는 웹사이트에 애니메이션 효과를 정말 편하게 줄 수 있는 라이브러리를 소개한다. 자바스크립트 코드는 전혀 필요없이 필요한 곳에 class 추가만 해주면 애니메이션이 적용되는 CSS 라이브러리이다. 다양한 애니메이션 효과가 있어서 원하는 것을 골라서 class만 추가해주면 바로 적용이 된다.

 

 

Animate.css

라이브러리 이름은 animate.css이다. 설치 및 사용법은 아주 간단하므로 문서를 참고하면 된다.

 

설치

npm 설치

$ npm install animate.css --save

파일 import 

import 'animate.css'

 

사용법

적용할 html 요소에 아래와 같이 클래스를 추가하면 끝이다.

<div class="animate__animated animte__{효과명}">element</div>

추가로 몇가지 옵션이 있는데 이름만 보면 무엇인지 쉽게 알 수 있을 것이다. 

아래의 클래스를 class에 같이 추가만 해주면 적용이 된다.

지연시간	animate__delay-2s animate__delay-3s animate__delay-4s animate__delay-5s
속도	animate__slow animate__slower animate__fast animate__faster
반복횟수	animate__repeat-1 animate__repeat-2 animate__repeat-3 animate__infinite

아래에서 몇가지 샘플을 보여주고 있다.

아래 샘플에는 모두 animate__slow animate__infinite 가 적용되어 있다.

 

Bounce

<div class="animate__animated animate__bounce">Hello World</div>

 

Hello World

 

Flash

<div class="animate__animated animate__flash">Hello World</div>

 

Hello World

 

BackInLeft

<div class="animate__animated animate__backInLeft">Hello World</div>

 

Hello World

 

Flip

<div class="animate__animated animate__flip">Hello World</div>

 

Hello World

 

RotateIn

<div class="animate__animated animate__rotateIn">Hello World</div>

 

Hello World

 

ZoomInDown

<div class="animate__animated animate__zoomInDown">Hello World</div>

 

Hello World

 

Hinge

<div class="animate__animated animate__hinge">Hello World</div>

 

Hello World

 

 

 

 

결론

animate.css 웹사이트에 가면 모든 효과를 볼 수 있다. 적당한 애니메이션은 웹페이지를 좀 더 생동감있게 보여줄 수 가 있다.

하지만 애니메이션이 너무 과하면 없느니만 못해질 수가 있으므로 적당하게 사용하여 웹사이트의 방문자가 좋은 경험을 할 수 있게 만들자.