[DOM 이벤트] animationEvent & transitionEvent

1. animationName

CSS 애니메이션의 이름을 반환한다. Internet Explorer 기준 IE10 이상 브라우저부터 지원한다.

 <style>
    #div1{ 
      width:100px; 
      height:100px; 
      background-color:red; 
      -webkit-animation-name:moving; 
      -webkit-animation-duration:5s; 
      animation-name:moving; 
      animation-duration:5s; 
    }
    @keyframes moving{
        from{ width:100px; height:100px; }
        to{ width:200px; height:200px; }
    }
    @-webkit-keyframes moving{
        from{ width:100px; height:100px; }
        to{ width:200px; height:200px; }
    }
</style>
 <div id="div1">
 </div>
 <script>
    (function(event){
        var div = document.getElementById("div1");
 
        div.addEventListener("animationstart", myStartFunction);
 
        function myStartFunction(event) {
            div.innerHTML = "The animation-name is: " + event.animationName;
        }
    }());
</script>
 

 

2. elapseTime

css 애니메이션이 재생된 시간을 반환한다. 

아래의 소스 처럼 계속해서 반복하는 경우 elapseTime은 계속해서 증가한다.

 <style>
    #div1{ 
        width:100px; 
        height:100px; 
        background-color:red; 
        -webkit-animation:moving 4s infinite; 
        animation-name:moving 4s infinite; 
    }
    @keyframes moving{
        from{ width:100px; height:100px; }
        to{ width:200px; height:200px; }
    }
    @-webkit-keyframes moving{
        from{ width:100px; height:100px; }
        to{ width:200px; height:200px; }
    }
</style>
 <div id="div1">
 </div>
 <script>
    (function(event){
        var div = document.getElementById("div1");
 
        div.addEventListener("animationiteration", myStartFunction);
 
        function myStartFunction(event) {
            div.innerHTML = "The animation-time is: " + event.elapsedTime;
        }
    }());
</script>