animationend 이벤트

DOM 이벤트 AnimationEvent

정의와 사용법

CSS 애니메이션이 완료되면 animationend 이벤트가 발생합니다.

CSS 애니메이션에 대한 더 많은 지식을 원하시면, 우리의 CSS3 애니메이션 교본。

CSS 애니메이션을 재생할 때, 세 가지 이벤트가 발생할 수 있습니다：

예제

CSS 애니메이션이 끝나면 <div> 요소에 대해 일부 작업을 수행하십시오：

var x = document.getElementById("myDIV");
// Chrome, Safari 및 Opera에 대한 코드
x.addEventListener("webkitAnimationEnd", myEndFunction);
// 표준 문법
x.addEventListener("animationend", myEndFunction);

직접 테스트해 보세요

문법

object.addEventListener("webkitAnimationEnd", myScript);  // Chrome, Safari 및 Opera에 대한 코드
object.addEventListener("animationend", myScript);        // 표준 문법

주석：Internet Explorer 8 또는 이전 버전은 지원하지 않습니다. addEventListener() 메서드。

기술 세부 사항

버블링： 지원
취소 가능성： 지원하지 않음
이벤트 타입： AnimationEvent
DOM 버전： 레벨 3 이벤트

브라우저 지원

표의 숫자는 이 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

숫자 뒤의 "webkit" 또는 "moz"는 사용하기 전에 추가된 첫 번째 버전을 나타냅니다.

이벤트 Chrome IE Firefox Safari Opera
animationend 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

주석：Chrome, Safari 및 Opera에서는 webkitAnimationEnd를 사용하십시오.

관련 페이지

CSS 교본：CSS3 애니메이션

CSS 참조 설명서:CSS3 animation 속성

HTML DOM 참조 설명서:Style animation 속성

DOM 이벤트 AnimationEvent