2020. 3. 29. 00:00ㆍWeb/CSS
web-todo-list를 제작하면서 Modal을 키거나, 메모를 추가하거나 삭제할 때 전환 애니메이션을 적용하고 싶었다. 하지만 애니메이션들을 종류별로 하나하나 CSS로 코딩하는 건 너무나도 귀찮고 버거운 일이기 때문에 Animate.CSS라는 CSS 애니메이션 라이브러리를 사용하기로 했다.
Animate.CSS란?
A cross-browser library of CSS animations. As easy to use as an easy thing.
위는 Animate.CSS의 깃헙 설명이다. 간단히 말하자면 사용하기 쉬운 CSS 애니메이션 라이브러리라는 뜻이다.
https://daneden.github.io/animate.css/
Animate.css
daneden.github.io
위 링크는 Animate.CSS의 데모 사이트이다. 여기서 Animate.CSS로 구현할 수 있는 애니메이션들을 시연해볼 수 있다.
| 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 |
애니메이션 종류는 무려 77가지나 된다.
Animate.CSS 설치하기
1. CDN 사용하기
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
2. 직접 CSS파일 다운받기
https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
링크를 타고 들어가면 Animate.CSS의 코드가 나오는데 이를 F12를 눌러 나오는 크롬 개발자 도구의 Network 탭에서 다운로드해도 되고, 단순하게 전부 복사해서 메모장으로 붙여넣기해서 'animate.css'라는 파일로 저장해서 사용해도 된다.
Animate.CSS 적용하기
<h1 class="animated infinite bounce delay-2s">Example</h1>위와 같이 애니메이션을 적용하고 싶은 태그의 class에 "animated"를 추가하고 추가적인 옵션들을 넣으면 된다.
Class List
- infinite: 애니메이션이 무한히 재생됨
- delay: 애니메이션 딜레이
| delay-1s | 1s |
| delay-2s | 2s |
| delay-3s | 3s |
| delay-4s | 4s |
| delay-5s | 5s |
- Slow, Slower, Fast, Faster: 애니메이션 속도
| slow | 2s |
| slower | 3s |
| fast | 800ms |
| faster | 500ms |
Animate.CSS 응용하기
1. 기본적인 응용방법
function animateCSS(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add('animated', animationName)
function handleAnimationEnd() {
node.classList.remove('animated', animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function') callback()
}
node.addEventListener('animationend', handleAnimationEnd)
}위의 코드를 JavaScript파일에 추가하고
animateCSS('.my-element', 'bounce')
// or
animateCSS('.my-element', 'bounce', function() {
// Do something after animation
})애니메이션을 실행하고 싶은 위치에서 animateCSS 함수를 사용하면 된다.
애니메이션이 끝나고 나서 수행하고 싶은 함수가 있다면 마지막 인자에 function() {}을 추가해서 실행시킬 수 있다.
2. 기본코드 수정해서 사용하기
function animateCSS(element, animationName, callback) {
const node = document.querySelector(element)
//
}위의 부분을
const node = element이처럼 수정해서 사용하면 애니메이션을 실행하고 싶은 부분을 직접 node로 지정해서 사용할 수 있다. 코드를 짜다 보니 노드 자체를 변수로 사용할 때가 많아서 함수에서 또 querySelector로 지정하는 것보다 이렇게 직접 노드로 전달받아 사용하는게 더 효율적이라 느껴졌다.
참조
https://github.com/daneden/animate.css
daneden/animate.css
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing. - daneden/animate.css
github.com