예
로모그래퍼 무언가를 <div> CSS의 애니메이션이 반복 될 때 요소 :
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
//
Standard syntax
x.addEventListener("animationiteration",
myRepeatFunction); »그것을 자신을 시도 정의 및 사용
CSS의 애니메이션이 반복 될 때 animationiteration 이벤트가 발생합니다.
CSS의 경우 animationiteration 카운트 속성이 설정되어 "1" 애니메이션이 한 번만 재생됩니다 의미의 animationiteration 이벤트가 발생하지 않습니다. 애니메이션이 이벤트가 발생하기에 두 번 이상 실행해야합니다.
CSS 애니메이션에 대한 자세한 내용에 대한 우리의 튜토리얼 참조 CSS3 애니메이션 .
CSS의 애니메이션이 재생되면 발생할 수있는 세 가지 이벤트가 있습니다 :
- animationstart는 -는 CSS 애니메이션을 시작했을 때 발생
- animationiteration 일 - CSS 애니메이션이 반복 될 때 발생
- animationend는 - CSS의 애니메이션이 완료되면 발생
브라우저 지원
테이블의 숫자는 완전히 이벤트를 지원하는 최초의 브라우저 버전을 지정합니다.
다음에 숫자 "webkit" 또는 "moz" 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 행사 | |||||
|---|---|---|---|---|---|
| animationiteration | 4.0 웹킷 | 10.0 | 16.0 5.0 MOZ | 4.0 웹킷 | 15.0 웹킷 12.1 |
참고 : 크롬, 사파리와 오페라를 들어, webkitAnimationIteration 접두사를 사용합니다.
통사론
object.addEventListener("webkitAnimationIteration", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationiteration", myScript );
// Standard syntax
참고 : addEventListener() 메서드는 인터넷 익스플로러 8 이전 버전에서는 지원되지 않습니다.
기술적 세부 사항
| 거품 : | 예 |
|---|---|
| 취소 가능 : | 아니 |
| 이벤트 유형: | AnimationEvent |
| DOM 버전 : | 레벨 3 이벤트 |
관련 페이지
CSS 자습서 : CSS3 애니메이션
CSS 참조 : CSS3 animation Property
CSS 참조 : CSS3 animation-iteration-count Property
HTML DOM 참조 : Style animation Property
<이벤트 객체