애니메이션 반복 이벤트
예시
CSS 애니메이션이 반복될 때 <div> 요소로 작업을 수행하십시오.
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
정의 및 사용
animationiteration 이벤트는 CSS 애니메이션이 반복될 때 발생합니다.
CSS animation-iteration-count 속성이 "1"로 설정되어 있으면 애니메이션이 한 번만 재생된다는 의미이므로 animationiteration 이벤트가 발생하지 않습니다. 이 이벤트를 실행하려면 애니메이션을 두 번 이상 실행해야 합니다.
CSS 애니메이션에 대한 자세한 내용은 CSS3 애니메이션 에 대한 자습서를 참조하세요 .
CSS 애니메이션이 재생될 때 발생할 수 있는 세 가지 이벤트가 있습니다.
- animationstart - CSS 애니메이션이 시작될 때 발생
- animationiteration - CSS 애니메이션이 반복될 때 발생
- animationend - CSS 애니메이션이 완료되었을 때 발생
브라우저 지원
표의 숫자는 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
"webkit" 또는 "moz" 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
| Event | |||||
|---|---|---|---|---|---|
| animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
참고: Chrome, Safari 및 Opera의 경우 webkitAnimationIteration 접두사를 사용하십시오.
통사론
object.addEventListener("webkitAnimationIteration", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationiteration", myScript); // Standard syntax
참고: addEventListener () 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.
기술적 세부 사항
| 거품: | 네 |
|---|---|
| 취소 가능: | 아니 |
| 이벤트 유형: | 애니메이션 이벤트 |
| DOM 버전: | 레벨 3 이벤트 |
관련 페이지
CSS 튜토리얼: CSS3 애니메이션
CSS 참조: CSS3 애니메이션 속성
CSS 참조: CSS3 animation-iteration-count 속성
HTML DOM 참조: 스타일 애니메이션 속성