개발노트
[CSS] 간편한 클래스 추가로 애니메이션 구현 : Animate.css
CSS 기능 지원이 제한적일 때에는 Javascript 또는 jQuery 스크립트를 통해 애니메이션 효과를 줬었지만 CSS 기능 지원이 많아지면서 이제는 간편하게 사용하면서도 지원하는 CSS 가 많아졌다. 직접 CSS 로 구현해도 되지만 가장 많이 사용하는 애니메이션은 클래스로 간단하게 사용할 수 있는 서비스가 있어서 소개하고자 합니다.
ANIMATE.CSS
Animate.css 여러가지 움직이는 효과의 라이브러리를 간단한 클래스 이름만 추가하여 사용하기 간편하게 만든 서비스이다. 공식 사이트 : https://animate.style/ 에 접속하면 우측 메뉴만 클릭해서 움직이는 효과를 간편하게 확인할 수 있으며 메뉴에 마우스를 가까이 하면 클립보드 복사 기능까지 제공하고 있다.
이전에 힘들게 구현하던 효과를 이제는 쉽고 간편하게 만들 수 있는 걸 보면 최신 기술을 알고 배우는 게 늘 필요하다.
ANIMATE.CSS 선언 방법
서버에 라이브러리를 설치하거나 CDN 링크를 통해 쉽게 선언이 가능하다.
$ npm install animate.css --save
현재 4.1.1 최신 버전이며 필요에 따라 라이트 버전이나 압축 버전을 사용하는 경우 https://cdnjs.com/libraries/animate.css 해당 링크에서 링크를 참고 할 수 있다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
알고 있겠지만 CDN 선언 할때에는 HEAD 태그 내에 포함하는 걸 권장한다.
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
ANIMATE.CSS 사용 방법
아래와 같이 H1 태그에서 사용하는 경우 약간 글씨가 커졌다가 작아지는 효과를 구현할 수 있습니다. "animate__animated" 이름의 클래스 뒤에 필요한 효과 클래스를 추가하는 방식으로 사용 방법이 간단 합니다.
<h1 class="animate__animated animate__pulse">타이틀 영역 입니다.</h1> <h2 class="animate__animated animate__flip">서브 타이틀 영역 입니다.</h2>
아래와 같이 다양한 효과를 구분하여 메뉴로 지원하고 있으며 클립보드에 복사가 되는 Class 이름을 사용하면 됩니다.
아래와 같이 여러가지 기능의 Class 를 이용하면 다양한 옵션으로 속도나 반복 횟수와 같은 부분을 조절 할 수 있다.
<div class="animate__animated animate__pulse animate__delay-2s animate__faster animate__repeat-2"> Example </div>
이벤트에 따른 동적 딜레이 구현
에니메이션 효과가 미리 구현이 되면 사용자는 화면을 보기도 전에 완료가 되어 있어 의미가 없어질 수 있다. 이런 경우에는 javascript 또는 jQuery 이용해서 동적인 효과를 구현할 수 있다.
var num = 0.0;
document.querySelectorAll('.ani_box').forEach((ani)=>{
// 각 요소의 에니메이션 딜레이를 1.0, 2.0, 3.0 으로 효과를 줄 수 있다.
any.style.setProperty('animation-delay', '${num}s');
num += 1.0;
})
버튼의 클릭이나 어떤 이벤트가 발생하였을 때 실행하는 것도 가능하다.
var element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__pulse'); // 해당 요소에 애니메이션 클래스 부여
// 클래스를 부여하면 자동 등록되는 이벤트
element.addEventListener('animationend', () => {
// 애니메이션 끝나면 해당 함수를 실행한다
});ANIMATE.CSS 느리고 빠르게 실행하기
아래와 같이 숫자를 입력하지 않고도 자주 사용하는 속도인 class 이름으로 animate__slow : 2s, animate__slower : 3s, animate__fast : 800ms, animate__faster : 500ms 간편하게 사용이 가능하다.
<div class="animate__animated animate__bounce animate__faster">Example</div>
전역변수로 선언하여 동일하게 사용하면 간편하고 공통으로 지정할 수 있다.
:root {
--animate-duration: 2s;
}
.my-element {
--animate-duration: 0.5s;
}기타 주의 사항
1. 인 라인 블록 수준 요소 단위로 효과를 주기에 display: inline-block 인 라인 요소가 아닌 경우에는 작동이 되지 않을 수 있습니다.
2. 애니메이션 효과가 작동되는 범위에 사용하고 있는 구역이나 디자인이 있는 경우 스크롤 바가 생길 수 있으며 overflow: hidden 속성을 사용하여 제어 합니다.
3. 반복 간격은 CSS 구현이 불가능하며 javascript로 구현해야 합니다.
기타 도움말은 해당 사이트 첫 화면 미리 보기 아래 부분에 사용자 문서가 작성되어 있습니다.
