Animate.css 애니메이션 효과
페이지 정보
작성자
소프트존
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
작성일 19-03-20 20:36
본문
이미 완성된 홈페이지내에 애니메이션 효과를 낼 수 있습니다.
jquery 형식으로 제작되거나 css 형식으로 그대로 제공 됩니다.
몇가지 사용방법이 있습니다.
[CDN 주소]
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
[JQUERY 방식]
$('#yourElement').addClass('animated bounceOutLeft');
// See https://github.com/daneden/animate.css/issues/644
var animationEnd = (function(el) {
var animations = {
animation: 'animationend',
OAnimation: 'oAnimationEnd',
MozAnimation: 'mozAnimationEnd',
WebkitAnimation: 'webkitAnimationEnd',
};
for (var t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
})(document.createElement('div'));
$('#yourElement').one(animationEnd, doSomething);
[CSS 방식]
<div class="animated bounce delay-2s">Example1</div>
위에 보시는것처럼 animated bounce delay-2s 클래스값만 넣어줘도
해당 div 에 바운스 되는 효과를 적용할 수 있습니다.
Class Name Delay Time
delay-2s 2s
delay-3s 3s
delay-4s 4s
delay-5s 5s
또는
<div class="animated bounce faster">Example2</div>
위처럼도 사용이 가능합니다.
Class Name Speed Time
slow 2s
slower 3s
fast 800ms
faster 500ms
[애니메이션 효과 클래스명]
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
jackInTheBox
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
heartBeat
첨부파일
- animate.css-master.zip (87.5K) 0회 다운로드 | DATE : 2019-03-20 20:36:11
댓글목록
등록된 댓글이 없습니다.
