Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML DOM AnimationEvent 완벽 가이드 – CSS 애니메이션 이벤트 제어 방법

HTML DOM AnimationEvent란?

HTML DOM AnimationEvent는 JavaScript에서 CSS 애니메이션이 실행되는 동안 발생하는 이벤트를 처리하는 객체입니다. 이 객체는 애니메이션과 관련된 이벤트 정보를 제공하며, 이를 활용하면 CSS 애니메이션을 훨씬 더 정교하게 제어할 수 있습니다. 즉, 어떤 이벤트가 애니메이션을 트리거했는지 설명함으로써 이벤트와 애니메이션 사이의 관계를 명확하게 나타내 줍니다.

애니메이션 이벤트의 종류

CSS 애니메이션에서 사용할 수 있는 대표적인 이벤트는 다음과 같습니다.

  • animationstart – 애니메이션이 시작될 때 발생합니다.
  • animationiteration – 애니메이션이 한 사이클을 끝내고 반복될 때 발생합니다.
  • animationend – 애니메이션이 정상적으로 종료될 때 발생합니다.
  • animationcancel – 애니메이션이 도중에 취소될 때 발생합니다.

AnimationEvent의 주요 속성

AnimationEvent 객체에서 제공하는 주요 속성은 다음과 같습니다.

속성설명
animationName현재 실행 중인 애니메이션의 이름을 반환합니다.
elapsedTime애니메이션이 시작된 후 경과한 시간을 초 단위로 반환합니다.
pseudoElement애니메이션이 적용된 가상 요소(pseudo-element)의 이름을 반환합니다. 예: ::before, ::after, ::first-line 등

문법(Syntax)

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>

참고 − 위 예제는 Chrome 74.0.3729.169 버전에서 테스트되었습니다. 실제 프로젝트에 적용하기 전에 사용 중인 브라우저의 AnimationEvent 호환성 여부를 반드시 확인하시기 바랍니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM AnimationEvent 완벽 가이드 – CSS 애니메이션 이벤트 제어 방법

5초가 지나면 요소가 아래쪽으로 이동합니다.

HTML DOM AnimationEvent 완벽 가이드 – CSS 애니메이션 이벤트 제어 방법

예제 코드 분석

위 예제에서 수행한 작업을 단계별로 살펴보겠습니다.

1. 애니메이션 박스 생성

div 요소를 사용하여 400px × 100px 크기의 사각형 박스를 만들었습니다.

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

2. 애니메이션 이동 경로 정의

@keyframes 규칙을 통해 div가 움직일 시작 위치와 끝 위치를 지정하여 애니메이션을 구현했습니다.

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

3. 이벤트 리스너 등록

addEventListener() 메서드로 animationstart 이벤트를 감지하고, 애니메이션이 시작되는 순간 event.animationName 속성을 읽어 화면에 애니메이션 이름을 출력하도록 처리했습니다. 이처럼 AnimationEvent를 활용하면 애니메이션의 시작, 반복, 종료 시점에 원하는 동작을 자유롭게 추가할 수 있습니다.