HTML DOM TransitionEvent elapsedTime 속성 완벽 정리

HTML DOM의 TransitionEvent elapsedTime 속성은 전환(transition) 이벤트가 발생한 시점까지 해당 전환이 실행된 시간을 초 단위의 숫자로 반환합니다. CSS 트랜지션이 실제로 얼마나 진행되었는지 확인해야 할 때 유용하게 활용할 수 있습니다.

문법(Syntax)

전환이 실행된 초(seconds) 값을 반환하는 기본 문법은 다음과 같습니다.

transitionEvent.elapsedTime

예제 코드

아래 예제는 div 요소에 마우스를 올리면(hover) 트랜지션이 실행되고, transitionend 이벤트가 발생했을 때 elapsedTime 속성값을 화면에 출력하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>TransitionEvent elapsedTime</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
   #playArea {
      display: inline-block;
      border-radius: 50%;
      background-color: #DC3545;
      width: 50px;
      height: 50px;
      border: 3px solid #AC3509;
      transition: all 1.3s ease;
   }
   #playArea:hover {
      transform:translateX(80px);
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>TransitionEvent-elapsedTime</legend>
         <div id="playArea"></div>
         <div id="divDisplay"></div>
    </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var playDisplay = document.getElementById("playArea");
   function getElapsedTime(event) {
      divDisplay.textContent = 'Elapsed Time in Transition: '+event.elapsedTime+' seconds';
   }
   playDisplay.addEventListener("transitionend", getElapsedTime);
</script>
</body>
</html>

코드 설명

#playArea 요소에는 transition: all 1.3s ease; 스타일이 적용되어 있어, 모든 속성 변화가 1.3초에 걸쳐 부드럽게 일어납니다.
마우스를 올리면(hover) translateX(80px) 변형이 적용되어 요소가 오른쪽으로 이동합니다.
이동이 끝나면 transitionend 이벤트가 발생하고, getElapsedTime() 함수가 호출됩니다.
함수 내부에서 event.elapsedTime 값을 읽어 화면에 출력하며, 약 1.3초가 표시됩니다.

실행 결과

마우스를 올리기 전 — 빨간 원형 요소가 원래 위치에 있습니다.

HTML DOM TransitionEvent elapsedTime 속성 완벽 정리

마우스를 올린 후 — 요소가 오른쪽으로 이동하고, 전환에 걸린 시간이 출력됩니다.

HTML DOM TransitionEvent elapsedTime 속성 완벽 정리

참고 사항

elapsedTime 속성은 transitionrun, transitionstart, transitionend, transitioncancel 등 다양한 TransitionEvent에서 사용할 수 있습니다. 특히 transitioncancel 이벤트에서는 취소되기 전까지 진행된 시간을 확인할 수 있어 디버깅이나 애니메이션 로직 구현에 유용합니다.