CSS3 애니메이션 완료 시 콜백을 어떻게 트리거할 수 있나요?

CSS3 애니메이션용 콜백

CSS3 애니메이션은 인상적인 애니메이션 효과를 제공하지만 완료 시 콜백을 구현하는 유연성이 부족합니다. 이 기사에서는 이벤트 리스너를 활용하여 이에 대한 솔루션을 탐색합니다.

문제:

CSS3 애니메이션이 끝날 때 콜백 함수를 어떻게 트리거할 수 있습니까? JavaScript 애니메이션은 콜백을 지원하지만 CSS3 애니메이션에는 유사한 기능이 부족한 것 같습니다.

해결책:

CSS3 애니메이션은 콜백 메커니즘을 직접 제공하지 않지만 다음과 같은 이벤트를 내보냅니다. 이벤트 리스너를 사용하여 캡처되었습니다. 이를 통해 이러한 이벤트가 발생할 때 콜백을 실행할 수 있습니다. 두 가지 방법이 있습니다:

1. jQuery 사용:

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

2. 순수 JavaScript 사용:

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

이러한 이벤트 리스너는 애니메이션 완료를 감지하고 지정된 콜백 함수를 트리거합니다. 이렇게 하면 애니메이션 완료 시 콜백이 안정적으로 실행됩니다.

라이브 데모:

실제 데모를 보려면 http://jsfiddle에서 라이브 바이올린을 참조하세요. net/W3y7h/ 콜백 기능이 작동하는 모습을 확인하세요.

위 내용은 CSS3 애니메이션 완료 시 콜백을 어떻게 트리거할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!