집 > 기사 > 웹 프론트엔드 > animate.css은(는) 무슨 뜻인가요?

animate.css은(는) 무슨 뜻인가요?

WBOY원래의: 2022-09-14 17:01:192654검색

"animate.css"는 CSS3의 애니메이션을 사용하여 만든 애니메이션 효과 모음을 의미하며 "animate.css"는 일반적으로 사용되는 많은 애니메이션을 사전 설정하여 빠르게 사용하고 필요에 따라 쉽게 수정할 수 있습니다. class="애니메이션 효과 클래스 이름">".

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

animate.css는 무엇을 의미합니까?

animate.css는 CSS3 애니메이션을 사용하여 만든 애니메이션 효과 모음입니다. 일반적으로 사용되는 애니메이션 사전 설정이 많이 있으며 사용이 매우 간단합니다. 이 글에서는 animate.css의 사용법을 자세히 소개하겠습니다

Animate.css는 몇 가지 간단하고 일반적인 애니메이션을 캡슐화한 간단하고 효율적인 CSS 라이브러리로, 빠른 사용에 적합하고 필요에 따라 쉽게 수정할 수 있습니다.

파일 가져오기

<head>
<link rel="stylesheet" href="animate.min.css">
</head>

지정된 요소에 지정된 애니메이션 스타일 추가

<div class="animated bounce"></div>

animate.css 효과를 적용하는 모든 요소는 이 클래스 이름을 추가해야 합니다.

bounce, 그냥 선택 원하는 효과의 클래스 이름을 추가하세요.

요소에 애니메이션 스타일을 동적으로 추가하려면 jquery를 통해 추가할 수 있습니다

$(&#39;#element&#39;).addClass(&#39;animated bounce&#39;);

애니메이션 효과가 완료된 후 다음 코드를 통해 이벤트를 추가할 수도 있습니다

$(&#39;#element&#39;).one(&#39;webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend 
animationend&#39;, function);

Note

효과가 종료된 후에도 요소는 문서 흐름에서 여전히 공간을 차지하므로(더 이상 요소를 볼 수 없더라도) 요소가 실제로 사라지기를 원한다면 요소를 숨길 때 요소를 숨기세요. 애니메이션이 완료되었습니다. 예:

$(&#39;#element&#39;).one(&#39;webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend
 animationend&#39;, function(){$(this).hide();});

(동영상 공유 학습: css 동영상 튜토리얼, html 동영상 튜토리얼)

위 내용은 animate.css은(는) 무슨 뜻인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS에서 PC의 단위는 무엇입니까?다음 기사：CSS에서 PC의 단위는 무엇입니까?