- Animate.css 소개
- 사용 방법
- 옵션 정리
- 데모 화면
# Animate.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
- CSS 애니메이션 라이브러리 (다양한 CSS 애니메이션을 적용할 수 있다)
- HTML 요소 클래스명에 이름을 지정하여 애니메이션을 적용하여 사용
# 사용 방법
1. Animate.css 연결 (CDN)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
2. [HTML] 애니메이션 적용할 요소에 클래스명 지정
<h1 class="animate__animated animate__bounce">An animated element</h1>- 클래스명에 접두사 "animate__" 붙여서 옵션 지정 (지연시간, 작동시간, 반복횟수)
- 필수 클래스명 : 'animate__animated' 'animate__애니메이션이름'
- 클래스명은 공식 문서 가면 복사하여 사용할 수 있음
# 옵션 정리 (클래스명)
| 지연 시간 | 작동 시간 | 반복 횟수 | |||
| animate__delay-2s | 2s 지연 | animate__slow | 2s 동안 작동 | animate__repeat-1 | 1번 반복 |
| animate__delay-3s | 3s 지연 | animate__slower | 3s 동안 작동 | animate__repeat-2 | 2번 반복 |
| animate__delay-4s | 4s 지연 | animate__fast | 800ms 동안 작동 | animate__repeat-3 | 2번 반복 |
| animate__delay-5s | 5s 지연 | animate__faster | 500ms 동안 작동 | animate__infinite | 무한 반복 |
# 데모 화면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<title>Animate 데모</title>
<style>
/* reset.css */
*{margin: 0; padding: 0;}
li{list-style: none;}
/* common.css */
.wrap{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: 100vh;}
.wrap ul {display: flex; gap : 16px;}
.wrap ul li button{ border: 0; color: #fff; font-size: 16px; font-weight: 600; padding: 12px; cursor: pointer; border-radius: 10px;}
.wrap ul li button:hover {filter: brightness(110%);}
.wrap ul li:nth-child(1) button{background-color: crimson;}
.wrap ul li:nth-child(2) button{background-color: darkcyan;}
.wrap ul li:nth-child(3) button{background-color: goldenrod;}
.wrap #view{ font-size: 48px; font-weight: 600;}
</style>
</head>
<body>
<div class="wrap">
<p id="view">THIS IS ANIMATION</p>
<ul>
<li><button onclick="classNaming(this)">bounce</button></li>
<li><button onclick="classNaming(this)">backInDown</button></li>
<li><button onclick="classNaming(this)">fadeInLeft</button></li>
</ul>
</div>
<script>
function classNaming(button){
const text = button.textContent.trim(); // 버튼의 텍스트 가져오기, trim : 빈 공간 삭제
const view = document.getElementById("view");
view.classList.remove("animate__animated", `animate__${text}`); // 기존 애니메이션 클래스 제거
void view.offsetWidth;
// 강제 리플로우(Reflow) 발생 : 클래스가 다시 적용되도록 함
// Reflow : 브라우저 요소의 크기, 위치, 배치를 다시 계산하는 과정
view.className = "animate__animated" // 클래스명 초기화
view.classList.add(`animate__${text}`); // 클래스명 추가 추가
}
</script>
</body>
</html>'Web 개발 > Plugin&Library' 카테고리의 다른 글
| Slick.js [1] - 슬라이드 jQuery 라이브러리 (0) | 2025.02.19 |
|---|---|
| Scrolla.js [3] : Splitting.js 을 활용하여 개별 텍스트에 애니메이션 주기 (0) | 2025.02.18 |
| Scrolla.js [2] : CSS Custom (0) | 2025.02.17 |
| Scrolla.js [1] : with Animate.css - 스크롤 애니메이션 jQuery 라이브러리 (0) | 2025.02.16 |
| Splitting.js - 텍스트 분리 JS 라이브러리 (0) | 2025.02.13 |
