JavaScript를 사용하여 CSS3 애니메이션을 어떻게 일시 중지하고 다시 시작할 수 있습니까?

JavaScript를 사용하여 CSS3 애니메이션 일시 중지 및 재개

JavaScript를 사용하여 CSS3 애니메이션을 동적으로 조작하면 시각 효과 재생을 제어할 수 있습니다. 외부 라이브러리 없이 CSS3 애니메이션을 일시 중지하고 다시 시작하는 방법은 다음과 같습니다.

제공된 코드 샘플은 webkitAnimationPlayState 속성을 변경하여 애니메이션을 일시 중지하고 다시 시작하려고 시도합니다. 그러나 진행 중인 이벤트 핸들러로 인해 여러 번의 시도가 실패할 수 있습니다.

CSS 클래스를 사용하는 대체 방법

보다 효율적인 접근 방식은 CSS 클래스를 활용하여 애니메이션 상태를 제어하는 ​​것입니다. . 수정된 코드는 다음과 같습니다.

HTML:

<!-- Add the paused class initially to pause the animations by default -->
<img>

CSS:

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

JavaScript:

function doStuff(){
    var pic1 = document.getElementById("pic1");
    var pic2 = document.getElementById("pic2");

    // Toggle the paused class to resume or pause the animation
    pic1.classList.toggle("paused");
    pic2.classList.toggle("paused");
}

이 방법은 이벤트 핸들러 내에서 애니메이션을 명시적으로 일시 중지하고 다시 시작해야 합니다. 일시정지된 클래스를 추가하거나 제거하여 애니메이션 상태를 쉽게 제어할 수 있습니다.

위 내용은 JavaScript를 사용하여 CSS3 애니메이션을 어떻게 일시 중지하고 다시 시작할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!