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