'CSS애니메이션'에 해당되는 글 1건



https://daneden.github.io/animate.css/


공식 사이트 (?)입니다. 





기본 사용법은 




<head> 태그안에


<head>
  <link rel="stylesheet" href="animate.min.css">
</head>



animate.min.css 를 로드합니다.



<div class="animated bounce">Example</div>



클래스 이름을 animated를 앞에 정의해주고 뒤에 애니매이션 속성을 

써주면 적용이 됩니다.  

(태그안에 직접적용시 DOM Element가 로드 될때 한번만 실행됩니다.)

이걸 좀더 반복하거나 이벤트를 주시려면 javascript 문법을 

따로 정의 해주셔야 합니다.




제이쿼리를 통해 로드 되거나 버튼을 클릭해서 이벤트를 bind 해서 

클래스명을 변경시켜 동작할수도 있습니다.




공식 Git-Hub 에서 메뉴얼을 살펴보면 더자세하게 나와있습니다. 

참고하시길 바랍니다.



https://github.com/daneden/animate.css



클래스 이름들은 밑에 나열한 클래스이름들을 이용하시면 되겠습니다.



Class Name
bounceflashpulserubberBand
shakeheadShakeswingtada
wobblejellobounceInbounceInDown
bounceInLeftbounceInRightbounceInUpbounceOut
bounceOutDownbounceOutLeftbounceOutRightbounceOutUp
fadeInfadeInDownfadeInDownBigfadeInLeft
fadeInLeftBigfadeInRightfadeInRightBigfadeInUp
fadeInUpBigfadeOutfadeOutDownfadeOutDownBig
fadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBig
fadeOutUpfadeOutUpBigflipInXflipInY
flipOutXflipOutYlightSpeedInlightSpeedOut
rotateInrotateInDownLeftrotateInDownRightrotateInUpLeft
rotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRight
rotateOutUpLeftrotateOutUpRighthingejackInTheBox
rollInrollOutzoomInzoomInDown
zoomInLeftzoomInRightzoomInUpzoomOut
zoomOutDownzoomOutLeftzoomOutRightzoomOutUp
slideInDownslideInLeftslideInRightslideInUp
slideOutDownslideOutLeftslideOutRightslideOutUp
heartBeat





블로그 이미지

잡코드맨

댓글을 달아 주세요