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