css 애니메이션 효과
2020. 4. 2. 13:14ㆍhtml
css 애니메이션 효과
▶ Animate.css
- 다운로드 / 예시사이트 https://daneden.github.io/animate.css/
- css 파일명 인쿠르드하면 사용 가능
- 사용법
<link rel="stylesheet" href="animate.min.css">
<div class="animated fadeInDown">
animated - 기본 클래스 필수
fadeInDown - 원하는 효과 클래스 추가
</div>
수업 명
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 |
'html' 카테고리의 다른 글
크롬 bxslider 링크 오류 해결 방법 (0) | 2020.04.09 |
---|---|
jquery 애니메이션 AOS (0) | 2020.04.02 |
ccs 폰트 적용 (0) | 2019.12.10 |
html - 제목 태그 (0) | 2019.12.04 |
주석 - html / css / javascript (0) | 2019.12.03 |