CSS3 호버 애니메이션을 강제로 완료하려면 어떻게 해야 합니까?

Hover 시 CSS3 애니메이션 강제 완료

CSS3 애니메이션을 :hover 상태에 적용할 때 요소 종료 시 애니메이션이 갑자기 중지됩니다. . 이 동작은 바람직하지 않을 수 있으며, 특히 실행하는 데 특정 횟수의 반복이 필요한 애니메이션의 경우 더욱 그렇습니다. 이 문제를 해결하려면 다음 전략을 고려하세요.

JavaScript 사용:

가장 직접적인 해결책은 JavaScript를 사용하여 애니메이션을 강제로 완성하는 것입니다. 이는 이벤트 리스너를 통해 애니메이션 클래스를 동적으로 추가 및 제거함으로써 달성할 수 있습니다.

$(".element").hover(
  function() { $(this).addClass("animation-name"); },
  function() { $(this).removeClass("animation-name"); }
);

CSS 키프레임 활용:

현재 CSS 전용 솔루션은 없지만 호버 시 애니메이션 완료를 직접 강제합니다. 한 가지 기술에는 호버 애니메이션 이상으로 확장되는 더미 키프레임을 만드는 것이 포함됩니다. 기간.

@keyframes bounce {
  ... (Original animation keyframes) ...
  99% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

키프레임 기간을 약간 연장하면 마우스 오버 상태가 종료된 후에도 애니메이션이 계속 완료됩니다.

잠재적 주의 사항:

어떤 경우에는 강제로 애니메이션을 완성하면 시각적 아티팩트가 발생할 수 있다는 점에 유의하는 것이 중요합니다. 예를 들어 애니메이션에 회전 요소가 포함된 경우 마우스가 해당 요소에서 나갈 때 갑작스러운 정지나 점프가 발생할 수 있습니다.

위 내용은 CSS3 호버 애니메이션을 강제로 완료하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!