HTML | DOM 动画事件

在 HTML 文档中， AnimationEvent接口用于表示提供与动画相关的信息的事件。 AnimationEvent包含诸如animationName 、 elapsedTime和pseudoElement等属性。

1. animationName： animationName属性返回事件动画的名称。它返回与过渡关联的动画名称CSS 属性的值。
   句法：

   event.animationName;
   

   返回类型：它返回一个表示动画名称的字符串。

   示例 1：

     
   
       
           div {
               width: 550px;
               height: 50px;
               background: green;
               position: relative;
               -webkit-animation-name: animate;
               /* Chrome, Safari, Opera */
               -webkit-animation-duration: 5s;
               /* Chrome, Safari, Opera */
               animation-name: animate;
               animation-duration: 5s;
           }
           /* Chrome, Safari, Opera */
             
           @-webkit-keyframes animate {
               from {
                   top: 0px;
               }
               to {
                   top: 500px;
               }
           }
             
           @keyframes animate {
               from {
                   top: 0px;
               }
               to {
                   top: 500px;
               }
           }
       
   
     
   
       
       
           var x = document.getElementById("div1");
           
           // Code for Chrome, Safari and Opera
           x.addEventListener(
             "webkitAnimationStart", StartAnimation);
           
           // Standard syntax
           x.addEventListener(
             "animationstart", StartAnimation);
     
           
           // Return animation name
           function StartAnimation(event) {
               this.innerHTML =
                 "The animation-name is:"
               + event.animationName;
           }
       
   
     

   输出：
   

2. elapsedTime： elapsedTime属性返回动画在动画事件中运行的秒数。

   句法：

   event.elapsedTime;
   

   返回类型：它返回一个数字，表示动画已运行的秒数。

   示例 2：

     
   
       
           div {
               width: 50px;
               height: 50px;
               background: green;
               position: relative;
               /* Chrome, Safari, Opera */
              -webkit-animation: animate 4s infinite;
               animation: animate 4s infinite;
           }
           /* Chrome, Safari, Opera */
             
           @-webkit-keyframes animate {
               from {
                   left: 500px;
               }
               to {
                   left: 0px;
               }
           }
             
           @keyframes animate {
               from {
                   left: 500px;
               }
               to {
                   left: 0px;
               }
           }
       
   
     
   
       
       
       
           var x = document.getElementById("div1");
           
           // Code for Chrome, Safari and Opera
           x.addEventListener(
          "webkitAnimationIteration", RepeatAnimation);
           
           // Standard syntax
           x.addEventListener(
           "animationiteration", RepeatAnimation);
     
           function RepeatAnimation(event) {
     
               this.style.backgroundColor = 
                 "lightgreen";
               this.innerHTML = "Elapsed time: "
               + event.elapsedTime + " seconds";
           }
       
   
     

   输出：
   

支持的浏览器：

• 谷歌浏览器
• 火狐浏览器
• 边缘
• 苹果浏览器
• 歌剧