AnimationEvent elapsedTime 속성
예시
애니메이션이 실행된 시간(초)을 확인합니다.
var x = document.getElementById("myDIV");
x.addEventListener("animationiteration", myRepeatFunction);
function myRepeatFunction(event) {
this.innerHTML = "Elapsed time: " + event.elapsedTime;
}
정의 및 사용
elapsedTime 속성은 애니메이션 이벤트가 발생할 때 애니메이션이 실행된 시간(초)을 반환합니다.
참고: 애니메이션이 일시 중지된 경우( animation-delay CSS 속성 사용) 반환 값은 영향을 받지 않습니다.
참고: animationstart 이벤트 의 경우 이 속성은 항상 "0"을 반환합니다.
이 속성은 읽기 전용입니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| elapsedTime | Yes | 10.0 | 6.0 | Yes | Yes |
통사론
event.elapsedTime
기술적 세부 사항
| 반환 값: | 애니메이션이 실행된 시간(초)을 나타내는 숫자 |
|---|
관련 페이지
HTML DOM 참조: animationstart 이벤트
HTML DOM 참조: animationiteration 이벤트
HTML DOM 참조: animationend 이벤트
HTML DOM 참조: AnimationEvent animationName 속성
CSS 참조: CSS3 애니메이션 속성
CSS 참조: CSS3 animation-duration 속성