HTML | DOM动画迭代事件

animationiteration事件在重复 CSS 动画时发生。

如果 CSS animation-iteration-count 属性设置为“1” ，动画只会播放一次。动画需要多次运行才能触发此事件。

播放 CSS 动画时可能发生的事件：

• animationstart：当 CSS 动画开始时发生。
• 动画迭代：在重复 CSS 动画时发生。
• animationend：当 CSS 动画完成时发生。

句法：

• Chrome、Safari 和 Opera 的代码

  object.addEventListener("webkitAnimationIteration", myScript);

• 标准语法：

  object.addEventListener("animationiteration", myScript);

例子：

  

    
        #div {
            width: 100%;
            height: 100px;
            background: green;
            position: relative;
            font-size: 40px;
        }
        
        /* Chrome, Safari, Opera */
        @-webkit-keyframes mymove {
            from {
                top: 0px;
            }
            to {
                top: 200px;
            }
        }
          
        @keyframes mymove {
            from {
                top: 0px;
            }
            to {
                top: 200px;
            }
        }
    

  

    
        
          GeeksforGeeks
      
  
        
            Click me to start the animation.
        
  
        
            var x = document.getElementById("div");
  
            // Start the animation with JavaScript
            function GFGFun() {
                // Code for Chrome, Safari and Opera
                x.style.WebkitAnimation = "mymove 4s 2";
                // Standard syntax
                x.style.animation = "mymove 4s 2";
            }
  
            // Code for Chrome, Safari and Opera
            x.addEventListener("webkitAnimationStart", StartFun);
            x.addEventListener("webkitAnimationIteration", RepeatFun);
  
            // Standard syntax
            x.addEventListener("animationstart", StartFun);
            x.addEventListener("animationiteration", RepeatFun);
  
            function StartFun() {
                this.innerHTML = "The animation has started";
                this.style.backgroundColor = "lime";
            }
  
            function RepeatFun() {
                this.innerHTML = "Animation was played again";
                this.style.backgroundColor = "darkgreen";
            }
        
    

  

输出：

支持的浏览器： DOM animationiteration Event支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 苹果Safari
• 歌剧