animationend 이벤트
예
CSS 애니메이션 요소의 단부에 첨가 한 후, <div가> 이벤트를 수신 :
VAR X = document.getElementById를 ( "myDIV을");
// 크롬, 사파리와 오페라 코드
x.addEventListener ( "webkitAnimationEnd", myStartFunction);
// 표준 구문
x.addEventListener ( "animationend", myStartFunction);
// 크롬, 사파리와 오페라 코드
x.addEventListener ( "webkitAnimationEnd", myStartFunction);
// 표준 구문
x.addEventListener ( "animationend", myStartFunction);
»시도
정의 및 사용
CSS 애니메이션이 완료된 후 animationend 이벤트가 트리거된다.
더 많은 CSS 애니메이션에 대해, 우리의 참조하시기 바랍니다 CSS3 애니메이션 절을 참조하십시오.
CSS 애니메이션은 다음 세 가지 이벤트가 발생한다 :
- animationstart - CSS의 애니메이션 트리거의 시작 후
- animationiteration - CSS의 애니메이션 트리거 반복
- animationend - CSS 완료 후 트리거
브라우저 지원
테이블의 수치는 이벤트의이 버전을 지원하는 최초의 브라우저를 나타냅니다.
이벤트를 지원하는 최초의 버전으로 지정된 수의 접두사 번호 뒤에 "웹킷"또는 "MOZ".
| 행사 | |||||
|---|---|---|---|---|---|
| animationend | 4.0 웹킷 | 10.0 | 16.0 5.0 MOZ | 4.0 웹킷 | 15.0 웹킷 12.1 |
참고 : 크롬, 사파리와 오페라 브라우저는 접두사를 webkitAnimationEnd.
문법
object.addEventListener ( "webkitAnimationEnd"MyScript를) ; // 크롬, 사파리 와 오페라
.addEventListener ( "animationend"MyScript를 객체 ); // 표준 구문
.addEventListener ( "animationend"MyScript를 객체 ); // 표준 구문
참고 : 인터넷 익스플로러 8과 IE의 이전 버전을 지원하지 않습니다 하여 addEventListener () 메서드를.
기술 세부 사항
| 거품을 지원하는 여부 : | 예 |
|---|---|
| 그것은 취소 할 수 있습니다 : | 아니 |
| 이벤트 종류 : | AnimationEvent |
관련 페이지
CSS 자습서 : CSS3 애니메이션
CSS 참조 : CSS3의 애니메이션 속성
HTML DOM 참조 : 스타일 애니메이션 속성
이벤트 객체