JavaScript를 사용하여 CSS 애니메이션을 어떻게 트리거할 수 있습니까?

JavaScript에서 CSS 애니메이션 트리거

일반 JavaScript로 CSS 애니메이션을 트리거하는 것은 웹 페이지에 상호 작용 기능을 추가하는 간단하면서도 효과적인 방법입니다. 이 접근 방식은 jQuery나 다른 프레임워크를 사용하지 않고 다양한 이벤트에 대한 특정 애니메이션을 대상으로 해야 할 때 특히 유용합니다.

이벤트 리스너를 사용하여 애니메이션 트리거

JavaScript를 사용하여 애니메이션을 트리거하려면 이벤트 리스너를 사용하여 애니메이션을 트리거하는 특정 이벤트를 수신할 수 있습니다. 예를 들어 스크롤 이벤트를 사용하면 사용자가 페이지를 스크롤할 때 애니메이션을 트리거할 수 있습니다.

// Add event listener to the window object
window.addEventListener('scroll', function() {
  // Get the element(s) you want to animate
  var elements = document.querySelectorAll('.my-animation');

  // Loop through the elements and start the animation
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.animation = "my-animation 2s 2s forward";
  }
});

클래스 조작 사용

애니메이션을 트리거하는 또 다른 방법은 다음과 같습니다. 요소에서 클래스를 추가하거나 제거하여. 이는 일반적으로 JavaScript의 classList API를 사용하여 수행됩니다. 예를 들어, animation이라는 클래스를 추가하거나 제거하여 애니메이션을 즉시 전환할 수 있습니다.

// Get the element(s) you want to animate
var elements = document.querySelectorAll('.my-animation');

// Add the "animated" class to start the animation
for (var i = 0; i < elements.length; i++) {
  elements[i].classList.add('animated');
}

// Remove the "animated" class to stop the animation
for (var i = 0; i < elements.length; i++) {
  elements[i].classList.remove('animated');
}

이벤트 리스너와 클래스 조작을 결합하면 JavaScript에서 CSS 애니메이션을 트리거하고 타이밍과 동작을 제어할 수 있습니다. 사용자 상호작용이나 기타 이벤트에 반응하여 이러한 애니메이션을 생성합니다.

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