애니메이션 종료 이벤트
예시
CSS 애니메이션이 종료되면 <div> 요소로 작업을 수행하십시오.
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);
정의 및 사용
animationend 이벤트는 CSS 애니메이션이 완료되면 발생합니다.
CSS 애니메이션에 대한 자세한 내용은 CSS3 애니메이션 에 대한 자습서를 참조하세요 .
CSS 애니메이션이 재생될 때 발생할 수 있는 세 가지 이벤트가 있습니다.
- animationstart - CSS 애니메이션이 시작될 때 발생
- animationiteration - CSS 애니메이션이 반복될 때 발생
- animationend - CSS 애니메이션이 완료되었을 때 발생
브라우저 지원
표의 숫자는 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
"webkit" 또는 "moz" 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Event | |||||
---|---|---|---|---|---|
animationend | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
참고: Chrome, Safari 및 Opera의 경우 webkitAnimationEnd 접두사를 사용하십시오.
통사론
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationend", myScript); // Standard syntax
참고: addEventListener () 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.
기술적 세부 사항
거품: | 네 |
---|---|
취소 가능: | 아니 |
이벤트 유형: | 애니메이션 이벤트 |
DOM 버전: | 레벨 3 이벤트 |
관련 페이지
CSS 튜토리얼: CSS3 애니메이션
CSS 참조: CSS3 애니메이션 속성
HTML DOM 참조: 스타일 애니메이션 속성