Animate.css는 각종 애니메이션 클래스를 모아놓은 라이브러리이다.
Animate.css를 사용하면 100여가지 정도 되는 다양한 애니메이션 라이브러리들을 편리하게 사용 할 수 있다.
아래의 사이트에 가면 다양한 예제들을 확인 할 수 있다.
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>
직접 css파일 다운받아서 연결하기
https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
위에 파일을 링크 연결해도 되고 다운받아서 사용해도 된다.
아래 파일을 다운받아서 압축을 풀어서 사용해도 된다.
https://github.com/animate-css
Animate.css
Animate.css has one repository available. Follow their code on GitHub.
github.com
Animate.css 공식 깃허브에서 다운 받을 수 있다.
Animate.css 사용법
Animate.css 설치 후에는 클래스 사용시에 animate__animated를 붙여주고 그 다음에
animate__사용할 애니메이션명 이런식으로 클래스를 추가해 준다.
예를들어 통통 튀기는 bounce효과를 주고 싶다면
<h1 class="animate__animated animate__bounce">animate.css</h1>
만약 bounce애니메이션 효과에 반복횟수를 조정하고 싶다면
<div class="animate__animated animate__bounce animate__repeat-2">animated.css</div>animate__repeat-2를 추가하면 2번 반복하게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animate</title>
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div class="wrap">
<h1 class="animate__animated animate__bounce">animate.css</h1>
</div>
</body>
</html>'Front-end > CSS' 카테고리의 다른 글
| background-origin 속성 (0) | 2021.12.19 |
|---|---|
| 인접 형제 선택자 + 모든형제 선택자 ~ 차이 (0) | 2021.12.18 |
| background-clip 속성 (0) | 2021.12.05 |
| css rgba 색상 (0) | 2021.12.02 |
| 모든 브라우저에서 표현할 수 있는 웹안전색상 (0) | 2021.11.30 |
댓글