AnimationEvent elapsedTime 속성
정의와 사용법
elapsedTime 속성은 애니메이션이 일어났을 때 애니메이션이 이미 실행된 초 수를 반환합니다.
주의사항:애니메이션이 일시 중지되었을 경우( CSS 속성 animation-delay를 사용하여), 반환 값은 영향을 받지 않습니다.
주의사항:대신 animationstart 이벤트이 속성은 항상 "0"을 반환합니다.
주의사항:이 속성은 읽기 전용입니다.
예제
동작이 얼마나 많은 초를 실행했는지 확인하세요:
var x = document.getElementById("myDIV");
x.addEventListener("animationiteration", myRepeatFunction);
function myRepeatFunction(event) {
this.innerHTML = "Elapsed time: " + event.elapsedTime;
}
문법
이벤트.elapsedTime
기술 세부 사항
| 반환 값: | 동작 시간을 나타내는 숫자 값. |
|---|
브라우저 지원
표에 나타난 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.
| 속성 | 크롬 | IE | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|---|
| elapsedTime | 지원 | 10.0 | 6.0 | 지원 | 지원 |
관련 페이지
HTML DOM 참조서:animationstart 이벤트
HTML DOM 참조서:animationiteration 이벤트
HTML DOM 참조서:animationend 이벤트
HTML DOM 참조서:AnimationEvent animationName 속성
CSS 참조서:CSS3 animation 속성
CSS 참조서:CSS3 animation-duration 속성
