animate.css 애니메이션 라이브러리를 사용하는 방법

animate.css 애니메이션 라이브러리 사용 방법: 링크 태그를 통해 코드에 도입한 후 애니메이션 클래스와 필요한 애니메이션 효과의 애니메이션 클래스 이름을 애니메이션할 마크 요소에 추가합니다.

Animate.css CSS 라이브러리를 사용하면 너무 많은 CSS 코드를 작성하지 않고도 웹 페이지에 애니메이션을 설정할 수 있습니다. 실제로 CSS3 애니메이션 효과를 위해 바로 사용할 수 있는 라이브러리 모음입니다. 이 라이브러리는 흔들기, 플래시, 바운스, 뒤집기, 회전(rotateIn/rotateOut), fadeIn/fadeOut 등을 포함하여 총 50개 이상의 다양한 애니메이션을 제공합니다. 효과, 이러한 효과는 CSS3

를 지원하는 대부분의 브라우저에서 일관됩니다. [추천 과정: CSS3 튜토리얼]

먼저 Animate.css 라이브러리를 다운로드하고 링크 태그를 통해 코드에 도입해야 합니다.

다운로드 주소:http://cdn.bootcss.com/animate .css/3.5.2/animate.min.css

<link href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet" 
type="text/css">

Animate.css 라이브러리를 웹 페이지에 로드한 후, 여기에 작성된 모든 애니메이션에 액세스하고 해당 요소에서 애니메이션을 호출할 수 있습니다.

먼저 애니메이션을 적용하고 싶은 요소에 애니메이션 클래스를 추가한 후 공백을 추가하고 원하는 애니메이션 효과의 클래스명을 추가하면 됩니다

우리가 원하는 애니메이션 효과의 클래스명을 찾아 애니메이션 효과를 볼 수 있습니다 다음 링크를 통해

링크 주소: https://daneden.github.io/animate.css/

예: 경첩 애니메이션 효과 추가

<h1 class="animated hinge">PHP中文网</h1>

일부 이벤트를 통해 효과를 트리거하려면 JavaScript를 통해 수행할 수 있습니다. 클릭 이벤트를 트리거하고 요소에 클래스를 추가할 수 있습니다

예:

<button class="btn">点击</button>
		<h1>PHP中文网</h1>
		<script src="./jquery/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".btn").click(function(){
					$("h1").addClass(&#39;animated shake&#39;);
				
				});
			})
		</script>

Rendering:

마찬가지로 애니메이션 지연 및 애니메이션 반복 횟수를 사용하여 애니메이션의 지연 및 애니메이션 수를 변경할 수도 있습니다. play

.animated{
			-webkit-animation-iteration-count:5;
			-webkit-animation-duration:1s;
			animation-iteration-count:5;
			animation-duration:1s;
		}

Rendering:

요약: 위 내용은 이 글의 전체 내용입니다. 이 글을 통해 모두가 animate.css 애니메이션 라이브러리를 이해할 수 있기를 바랍니다.

위 내용은 animate.css 애니메이션 라이브러리를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!