:hover 요소 종료 시 CSS3 애니메이션이 완료되도록 어떻게 보장할 수 있나요?

:hover 요소 종료 시 CSS3 애니메이션 강제 종료

:hover 상태의 CSS3 애니메이션은 요소에 상호작용성을 추가하는 우아한 방법을 제공합니다. 그러나 한 가지 제한 사항은 커서가 요소를 떠날 때 애니메이션이 갑자기 중단된다는 것입니다. 이 문제를 극복하고 순전히 CSS를 통해 애니메이션이 실행을 완료하도록 하는 방법은 다음과 같습니다.

제공된 애니메이션 바운스는 바운스 효과를 생성하는 일련의 키프레임을 정의합니다. 마우스가 요소를 떠난 후에도 애니메이션이 계속되도록 하기 위해 우리는 영리한 기술을 채택했습니다.

1. 클래스 트리거 추가:
   별도의 클래스를 생성하고 ' 애니메이션'을 해당 애니메이션(정의한 것과 동일한 바운스 키프레임)으로 지정합니다.
2. 다음으로 애니메이션을 트리거합니다. Hover:
   요소의 :hover 상태에서 애니메이션을 직접 적용하는 대신 애니메이션 클래스를 추가합니다. 이 클래스에는 실제 애니메이션이 포함되어 있습니다.
3. 애니메이션 종료 시 트리거 제거:
   JavaScript를 사용하여 애니메이션 종료 이벤트를 수신합니다. 애니메이션이 완료되면 요소에서 애니메이션 클래스를 제거합니다. 이렇게 하면 애니메이션이 효과적으로 중지됩니다.

수정된 예는 다음과 같습니다.

<style>
@keyframes bounce { /* Same as before */ }
.animated { animation: bounce 1s; }
</style>

<div class="box">
  Hover me!
</div>

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

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

이 접근 방식을 사용하면 커서가 .box를 떠난 후에도 애니메이션이 계속 재생됩니다. 요소. 실시간 데모를 보려면 업데이트된 Fiddle을 방문하세요: http://jsfiddle.net/u7vXT/1.

위 내용은 :hover 요소 종료 시 CSS3 애니메이션이 완료되도록 어떻게 보장할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!