CSS3 애니메이션 라이브러리 공유

소개

animate.css는 해외의 CSS3 애니메이션 라이브러리로, 60개 이상의 애니메이션 효과가 미리 설정되어 있습니다. , 바운스, 뒤집기, 회전(rotateIn/rotateOut), fadeIn/fadeOut 등과 같은 거의 모든 일반적인 애니메이션 효과를 다룹니다.

animate.css의 도움으로 CSS3 애니메이션 효과를 만드는 것이 매우 편리하고 빠르지만, 여전히 animate.css의 코드를 살펴보는 것이 좋습니다. 아마도 여기서 뭔가를 배울 수 있을 것입니다.

호환

브라우저 호환성: 물론 CSS3 animate 속성을 지원하는 브라우저와만 호환됩니다: IE10+, Firefox, Chrome, Opera 및 Safari. .

사용방법

1. 파일

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

을 가져오고

<p class="animated bounce" id="dowebok"></p>

를 사용하여 클래스<🎜를 추가합니다. 요소> 페이지를 새로 고침하면 애니메이션 효과를 볼 수 있습니다. animation은 애니메이션의 지속 시간을 정의하는 전역 변수 와 유사하며 애니메이션의 특정 애니메이션 효과 이름이며 원하는 효과를 선택할 수 있습니다.

애니메이션이 무한 재생되면 클래스 무한 추가가 가능합니다.

JavaScript 또는 jQuery를 통해 다음과 같은 클래스를 요소에 추가할 수도 있습니다.

$(function(){
    $('#dowebok').addClass('animated bounce');
});

일부 애니메이션 효과는 결국 요소를 보이지 않게 만듭니다. 예를 들어 페이드 아웃, 왼쪽 슬라이드 등의 경우

클래스를 삭제해야 할 수도 있습니다. 예:

$(function(){
    $('#dowebok').addClass('animated bounce');
    setTimeout(function(){
        $('#dowebok').removeClass('bounce');
    }, 1000);
});

animate.css의 기본 설정은 우리가 원하는 것과 다를 수 있습니다. 경우에 따라 재설정할 수 있습니다. 예:

#dowebok {
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

브라우저 접두어를 추가하세요.

[관련 추천]

1.

CSS3 무료 동영상 튜토리얼

2.

CSS3 학습용 애니메이션 상세 설명

3.

CSS3 애니메이션 제작 학습

4.

CSS3의 새로운 기능 상세 분석

5. >css3의 새로운 기능에 대한 자세한 설명

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