animate.css는 애니메이션 라이브러리이다.
css를 통해 직접 만들수도 있지만 이를 이용하면 더욱 간편하게 사용가능하다.
공식사이트
Animate.css | A cross-browser library of CSS animations.
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
animate.style
설치방법
npm
$ npm install animate.css --save
cdn
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
혹은 깃허브에서 다운받아 사용할 수 있다.
https://github.com/animate-css/animate.css
GitHub - animate-css/animate.css: 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing. - GitHub - animate-css/animate.css: 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
github.com
사용방법
<div class="animate__animated animate__pulse">HELLO</div>animate__animated를 기본값으로 넣어준 뒤,
공식홈페이지에 있는 애니메이션 이름을 class에 넣어주면 된다.
'Web > 플러그인' 카테고리의 다른 글
| [jQuery]이미지맵 반응형 적용 방법 (0) | 2023.03.16 |
|---|---|
| [imgLiquid] 반응형 이미지 이미지리퀴드 사용법 (0) | 2021.07.28 |
| [차트 플러그인] c3.js 시작하기 사용법 및 옵션 (0) | 2021.07.14 |
| [jQuery] 무료 차트(chart) 플러그인 정리 (0) | 2021.04.28 |
| chart.js를 사용해 막대 그래프 그리는 법 (예제 多) (0) | 2021.04.13 |