HTML | DOM 样式 animationIterationCount 属性

HTML DOM 中的 Style animationIterationCount属性用于设置或返回动画应播放的次数。

句法：

• 它用于返回 animationIterationCount 属性。

  object.style.animationIterationCount

• 它用于设置 animationIterationCount 属性。

  object.style.animationIterationCount = "number|infinite|initial|
  inherit"

属性值：

• number：用于设置动画播放的次数。其默认值为 1。
• 无限：它设置动画将播放无限次。
• 初始：它将 animationIterationCount 属性设置为其默认值。
• 继承：此属性值从其父元素继承。

示例 1：

    
        HTML DOM Style animationIterationCount Property
    
      
     
        div {
            width: 80px;
            height: 80px;
            background: lightgreen;
            position: relative;
              
            /* For Chrome, Safari, Opera browsers */
            -webkit-animation: mymove 2s 1;
            animation: mymove 2s 1;
        }
          
        /* Chrome, Safari, Opera */
        @-webkit-keyframes mymove {
            from { 
                left: 0px;
                top: 0px;
            }
            to {
                left: 250px;
                top: 250px;
            }
        }
          
        @keyframes mymove {
            from {
                left: 0px;
                top: 0px;
            }
            to {
                left: 250px;
                top: 250px;
                background-color:green;
            }
        }
    


    
        Click on the button to set 
        animation iteration count!
    
      
    
        Click Here!
    
    
      
    
      
        /* For Chrome, Safari, and Opera browsers */
        function myGeeks() {
            document.getElementById("GFG").style.WebkitAnimationIterationCount 
                    = "10"; 
            document.getElementById("GFG").style.animationIterationCount = "10";
        }
    
      
    
    

                    

输出：

示例 2：

  
    
        HTML DOM Style animationIterationCount Property
    
  
     
        div {
            width: 200px;
            height: 110px;
            background: green;
            text-align: center;
            padding-top:50px;
            position: relative;
              
            /* Chrome, Safari, Opera */
            -webkit-animation: mymove 2s 2; 
            animation: mymove 2s 2;
        }
          
        /* Chrome, Safari, Opera */
        @-webkit-keyframes mymove {
            from {left: 400px;}
            to {left: 0px;}
        }
          
        @keyframes mymove {
            from {left: 400px;}
            to {left: 0px;}
        }
    


    
        Click on the button to set
        animation iteration count!
    
      
    
        Click Here!
    
    
      
    
        function myGeeks() {
              
            /* For Chrome, Safari, and Opera browsers */
            document.getElementById("GFG").style.WebkitAnimationIterationCount
                = "infinite"; 
            document.getElementById("GFG").style.animationIterationCount
                = "infinite";
        }
    
    
      
    
        Style animationIterationCount Property
    
  

                    

输出：

支持的浏览器： DOM Style animationIterationCount 属性支持的浏览器如下：

• 铬 43.0
• 火狐 16.0, 5.0 -moz-
• 歌剧 30.0
• Safari 9.0