animationiteration 이벤트

DOM 이벤트 AnimationEvent

정의와 사용법

animationiteration 이벤트는 반복되는 CSS 애니메이션 중 발생합니다.

만약 CSS animation-iteration-count 속성"1"로 설정된 경우, 애니메이션은 한 번만 재생되며 animationiteration 이벤트가 발생하지 않습니다. 이 이벤트를 트리거하기 위해 애니메이션은 여러 번 실행되어야 합니다.

CSS 애니메이션에 대한 더 많은 지식을 원하시면, 우리의 CSS3 애니메이션 튜토리얼.

CSS 애니메이션이 재생될 때, 세 가지 이벤트가 발생할 수 있습니다:

예제

CSS 애니메이션이 반복될 때, <div> 요소에 대해 일부 작업을 수행하십시오:

var x = document.getElementById("myDIV");
// Chrome, Safari 및 Opera에 대한 코드
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// 표준 문법
x.addEventListener("animationiteration", myRepeatFunction);

개인적으로 시도해 보세요

문법

object.addEventListener("webkitAnimationIteration", myScript);  // Chrome, Safari 및 Opera에 대한 코드
object.addEventListener("animationiteration", myScript);        // 표준 문법

주석:Internet Explorer 8 이전 버전은 지원하지 않습니다. addEventListener() 메서드.

기술 세부 사항

폭발: 지원
취소 가능: 지원하지 않음
이벤트 유형: AnimationEvent
DOM 버전: 레벨 3 이벤트

브라우저 지원

표에 나타난 숫자는 이 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

숫자 뒤의 "webkit" 또는 "moz"는 사용하기 전에 추가된 첫 번째 버전을 나타냅니다.

이벤트 Chrome IE Firefox Safari Opera
animationiteration 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

주석:Chrome, Safari 및 Opera에서는 webkitAnimationEnd을 사용하십시오.

관련 페이지

CSS 강의:CSS3 애니메이션

CSS 참조 가이드:CSS3 animation 속성

CSS 참조 가이드:CSS3 animation-iteration-count 속성

HTML DOM 참조 가이드:Style animation 속성

DOM 이벤트 AnimationEvent