개발노트
목록
[CSS] 간편한 클래스 추가로 애니메이션 구현 : Animate.css
AnimateCSS애니메이션
CSS 2024.04.11 155 회 읽음
CSS 24.04.11 155


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로 구현해야 합니다.


기타 도움말은 해당 사이트 첫 화면 미리 보기 아래 부분에 사용자 문서가 작성되어 있습니다.

목록