HTML Style animationIterationCount用法及代码示例

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

用法:

它用于返回animationIterationCount属性。
```
object.style.animationIterationCount
```

它用于设置animationIterationCount属性。

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

属性值：

number:它用于设置动画将播放多少次。默认值为1。
infinite:它设置动画将播放无限次。
initial:它将animationIterationCount属性设置为其默认值。
inherit:此属性值是从其父元素继承的。

范例1：

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        HTML DOM Style animationIterationCount Property 
    </title> 
      
    <style>  
        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; 
            } 
        } 
    </style> 
</head> 
<body> 
    <p> 
        Click on the button to set  
        animation iteration count! 
    </p> 
      
    <button onclick="myGeeks()"> 
        Click Here! 
    </button> 
    <br> 
      
    <script> 
      
        /* For Chrome, Safari, and Opera browsers */ 
        function myGeeks() { 
            document.getElementById("GFG").style.WebkitAnimationIterationCount  
                    = "10";  
            document.getElementById("GFG").style.animationIterationCount = "10"; 
        } 
    </script> 
      
    <div id="GFG"></div> 
    
</body> 
</html>

输出：

范例2：

<!DOCTYPE html> 
<html> 
<head>   
    <title> 
        HTML DOM Style animationIterationCount Property 
    </title> 
  
    <style>  
        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;} 
        } 
    </style> 
</head> 
<body> 
    <p> 
        Click on the button to set 
        animation iteration count! 
    </p> 
      
    <button onclick="myGeeks()"> 
        Click Here! 
    </button> 
    <br> 
      
    <script> 
        function myGeeks() { 
              
            /* For Chrome, Safari, and Opera browsers */ 
            document.getElementById("GFG").style.WebkitAnimationIterationCount 
                = "infinite";  
            document.getElementById("GFG").style.animationIterationCount 
                = "infinite"; 
        } 
    </script> 
    <br> 
      
    <div id="GFG"> 
        Style animationIterationCount Property 
    </div> 
  
</body> 
</html>

输出：

支持的浏览器：下面列出了DOM样式animationIterationCount属性支持的浏览器：

chrome 43.0
Firefox 16.0、5.0 -moz-
Opera 30.0
Safari 9.0

相关用法

注：本文由纯净天空筛选整理自SHUBHAMSINGH10大神的英文原创作品 HTML | DOM Style animationIterationCount Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。