animate.css은(는) 무슨 뜻인가요?
- WBOY원래의
- 2022-09-14 17:01:192714검색
"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를 통해 추가할 수 있습니다
$('#element').addClass('animated bounce');
애니메이션 효과가 완료된 후 다음 코드를 통해 이벤트를 추가할 수도 있습니다
$('#element').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function);
Note
효과가 종료된 후에도 요소는 문서 흐름에서 여전히 공간을 차지하므로(더 이상 요소를 볼 수 없더라도) 요소가 실제로 사라지기를 원한다면 요소를 숨길 때 요소를 숨기세요. 애니메이션이 완료되었습니다. 예:
$('#element').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend
animationend', function(){$(this).hide();});(동영상 공유 학습: css 동영상 튜토리얼, html 동영상 튜토리얼)
위 내용은 animate.css은(는) 무슨 뜻인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!