002 - html5 애니메이션 효과 Animate.css 사용하기

html5 의 element(div, label 등)에 애니메이션 효과를 넣어주는 유용한 라이브러리 입니다.

 

https://animate.style/

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

 

무료 라이브러리 이며 사용법도 상당히 간단합니다.

 

아래 예제와 같이 라이브러리를 추가합니다.

 

사용가능한 기능들은 라이브러리 홈페이지에 접속하면 있는 오른쪽 메뉴에 나열되어 있습니다.

 

예제 아래에도 써놨습니다.

 

See the Pen 002 - html5 애니메이션 효과 Animate.css 사용하기 by Keun (@kwyuk) on CodePen.

아래 기능을 예제 처럼 이름만 변경해서 사용 가능합니다.

 

• bounce
• flash
• pulse
• rubberBand
• shakeX
• shakeY
• headShake
• swing
• tada
• wobble
• jello
• heartBeat

Back entrances

• backInDown
• backInLeft
• backInRight
• backInUp

Back exits

• backOutDown
• backOutLeft
• backOutRight
• backOutUp

Bouncing entrances

• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp

Bouncing exits

• bounceOut
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp

Fading entrances

• fadeIn
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• fadeInTopLeft
• fadeInTopRight
• fadeInBottomLeft
• fadeInBottomRight

Fading exits

• fadeOut
• fadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• fadeOutTopLeft
• fadeOutTopRight
• fadeOutBottomRight
• fadeOutBottomLeft

Flippers

• flip
• flipInX
• flipInY
• flipOutX
• flipOutY

Lightspeed

• lightSpeedInRight
• lightSpeedInLeft
• lightSpeedOutRight
• lightSpeedOutLeft

Rotating entrances

• rotateIn
• rotateInDownLeft
• rotateInDownRight
• rotateInUpLeft
• rotateInUpRight

Rotating exits

• rotateOut
• rotateOutDownLeft
• rotateOutDownRight
• rotateOutUpLeft
• rotateOutUpRight

Specials

• hinge
• jackInTheBox
• rollIn
• rollOut

Zooming entrances

• zoomIn
• zoomInDown
• zoomInLeft
• zoomInRight
• zoomInUp

Zooming exits

• zoomOut
• zoomOutDown
• zoomOutLeft
• zoomOutRight
• zoomOutUp

Sliding entrances

• slideInDown
• slideInLeft
• slideInRight
• slideInUp

Sliding exits

• slideOutDown
• slideOutLeft
• slideOutRight
• slideOutUp