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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。