HTML DOM 애니메이션 이벤트

<시간/>

HTML DOM AnimationEvent는 CSS 애니메이션이 실행될 때 발생하는 이벤트를 처리하는 JavaScript의 객체입니다. 기본적으로 애니메이션과 관련된 이벤트에 대한 정보를 제공합니다. CSS 애니메이션을 더 잘 제어할 수 있습니다. 애니메이션을 트리거한 이벤트를 설명하여 이벤트와 애니메이션 간의 관계를 나타냅니다.

속성

다음은 애니메이션 이벤트의 속성입니다 -

속성	설명
애니메이션 이름	실행 중인 애니메이션의 이름을 반환합니다.
경과 시간	애니메이션이 실행된 이후 경과된 시간을 초 단위로 반환합니다.
의사 요소	애니메이션의 유사 요소의 이름을 반환합니다. 예:::before, ::after, ::first-line 등

구문

다음은 animationEvent −

의 구문입니다.

animationEvent.property

예시

animationEvent의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<style>
   #ANIM-DIV {
      margin: 10px;
      width: 400px;
      height: 100px;
      background: lightgreen;
      position: relative;
      font-size: 30px;
      animation-name: animMove;
      animation-duration: 5s;
   }
   @-webkit-keyframes animMove {
      from {top: 0px;}
      to {top: 200px;}
   }
</style>
</head>
<body>
<div id="ANIM-DIV"></div>
<script>
   var x = document.getElementById("ANIM-DIV");
   x.addEventListener("animationstart", myAnimFunction);
   function myAnimFunction(event) {
      this.innerHTML = "The animation-name is: " + event.animationName;
   }
</script>
</body>
</html>

참고 − 이것은 크롬 74.0.3729.169에서 테스트되었습니다. animationEvent에 대한 브라우저 호환성을 확인하십시오.

출력

다음 출력을 생성합니다 -

HTML DOM 애니메이션 이벤트

5초 후에 요소가 아래쪽으로 이동합니다 -

HTML DOM 애니메이션 이벤트

위의 예에서 -

div를 사용하여 400px X 100px 직사각형 상자를 만들었습니다.

#ANIM-DIV {
   margin: 10px;
   width: 400px;
   height: 100px;
   background: lightgreen;
   position: relative;
   font-size: 30px;
   animation-name: animMove;
   animation-duration: 5s;
}

그런 다음 div가 애니메이션으로 이동할 시작 위치와 끝 위치를 지정했습니다 -

@-webkit-keyframes animMove {
   from {top: 0px;}
   to {top: 200px;}
}