css 애니메이션 라이브러리 사용법

$ npm install animate.css --save 설치 또 는 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

 

링크첨부

 

.클래스 { display: inline-block;

                   margin: 0 0.5rem;

                   animation: bounce; /* 애니메이션 이름 필수 */

                   animation-duration: 2s;  /*시전 시간 필수 */

 

• animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.
• animation-delay :엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.
• animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.
• animation-iteration-count : 애니메이션이 몇 번 반복될지 지정합니다. infinite 로 지정하여 무한히 반복할 수 있습니다.
• animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있습니다.
• animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.
• animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.

출처: https://webclub.tistory.com/621 [Web Club]