animate.css은(는) 무슨 뜻인가요?-프런트엔드 Q&A-php.cn

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

WBOY

풀어 주다： 2022-09-14 17:01:19

원래의

2710명이 탐색했습니다.

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

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

이 튜토리얼의 운영 환경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!