animate.css 애니메이션의 재생 시간은 어떻게 설정합니까?

Question

설명서를 읽었지만 실제로 코드를 작성하는 방법에 대해 혼란 스럽습니다. animate.css 문서는 지시 :

#yourElement { 
    -vendor-animation-duration: 3s; 
} 

참고 :

먼저 해당 공급 업체 접두사 (웹킷, MOZ 등)과 CSS에서 "공급 업체"대체하십시오 :이 스타일로 가고 있는가 섹션을 사용하거나 jquery를 사용하여 기간을 설정하고 변경할 수 있습니까 (기간은 가변적이기 때문에 궁극적으로이를 수행하는 방법을 알아야합니다).

둘째 : '해당 공급 업체 접두사'가 무엇인지 어떻게 알 수 있습니까? 내가 사용중인 애니메이션은 this 사이트의 '펄스'입니다.

Answer 1

CSS에 넣거나 동적으로 설정할 수 있습니다. 필요한 업체 프리픽스를 찾으려면 Can I Use에서 CSS 애니메이션을 확인하고 지원할 브라우저를 확인하십시오.

그러나 애니메이션이 복잡한 경우 자바 스크립트 애니메이션을 사용하면 더 많은 제어가 가능할 수 있습니다. JS 애니메이션은 CSS 애니메이션보다 느리지 만 jQuery는 애니메이션 속도가 느립니다. 애니메이션을위한 훌륭한 자바 스크립트 라이브러리는 GSAP입니다.

Answer 2

이러한 CSS 속성을 사용할 수 있습니다.

transition-delay:3s; 
transition-duration:3s; 

필요한 것을 사용할 수 있습니다. 또한이 경우 -webkit, -moz 및 -ms를 추가해야합니다.