반응형
#1 기능 설명
웹 프로젝트에서 강조 등 다양한 용도로 사용하는데 적합한 애니메이션 CSS 라이브러리입니다.
간단하게 클래스명을 추가하는것으로 다양한 효과를 사용하실 수 있습니다.
#2 효과 확인하기
다양한 효과들은 다음 공식 페이지에서 확인할 수 있습니다.
공식 페이지 : https://animate.style/
#3 적용 및 사용 방법
Animate.css 연결하기
※ NPM 방식과 CDN 방식을 지원합니다.
혹시나 해서 download 방식으로도 만들어 보았지만 아래 내용은 CDN 방식으로 설명합니다.
다음 코드를 </head> 앞에 붙여 넣습니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
사용 방법
기본적인 사용 방법은 효과를 주고싶은 곳에 animate__animated 클래스를 부여한 후, 뒤에 animate__[원하는 효과이름]을 추가해주면 됩니다. (*밑줄 2개입니다)
<div class="animate__animated animate__bounce animate__faster">Example</div>
효과의 클래스명은 오른쪽의 효과에 마우스를 올리면 복사 아이콘이 나타나니 이걸 이용하면 조금 더 쉽게 코드를 삽입할 수 있을 것입니다.
#4 정의되어 있는 옵션들
딜레이를 주는 클래스
• animate__delay-2s : 2초 딜레이 (1~5초 지원)
Slow, slower, fast, and Faster 클래스
※ 애니메이션에 따라 1초 미만인것도 있음
• animate__slow : 느리게 (2초)
• animate__slower : 더욱 느리게 (3초)
• animate__fast : 빠르게 (0.8초)
• animate__faster : 더욱 빠르게 (500ms)
반복 클래스
• animate__repeat-3 : 3회 반복 (1~3회 반복 지원)
• animate__infinite : 계속 반복
이렇게 클래스명만 부여하면 웹 실행시 모두 작동되어 버리기 때문에 자바스크립트 또는 다른 플러그인과 함께 사용하는 것이 좋습니다.
반응형