CSS3: hover 애니메이션이 마우스아웃 후 강제로 주기를 완료할 수 있나요?

:hover;의 CSS3 애니메이션 전체 애니메이션 강제 적용

CSS3에서 일반적인 애니메이션 기술은 :hover를 사용하여 요소에서 애니메이션을 트리거하는 것입니다. 그러나 요소에서 커서가 제거되면 애니메이션이 갑자기 중지됩니다.

질문

마우스가 요소를 떠난 후에도 :hover의 CSS3 애니메이션이 강제로 전체 애니메이션 주기를 계속하도록 할 수 있습니까? ?

답변

안타깝게도 CSS3만으로는 이 작업을 수행할 수 없습니다. 유일한 해결책은 CSS와 JavaScript를 조합하여 사용하는 것입니다.

JavaScript 솔루션

JavaScript를 사용하여 원하는 결과를 얻는 방법은 다음과 같습니다.

• 애니메이션을 다음과 같이 추가합니다. 클래스를 요소에 추가합니다.
• 애니메이션이 생성되면 애니메이션 클래스를 제거합니다.

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated")  
})

$(".box").hover(function(){
  $(this).addClass("animated");        
})

이 접근 방식을 사용하면 요소의 커서 위치에 관계없이 애니메이션이 전체 주기를 계속 이어갈 수 있습니다.

위 내용은 CSS3: hover 애니메이션이 마우스아웃 후 강제로 주기를 완료할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!