CSS animation-iteration-count用法及代碼示例

CSS中的animation-iteration-count屬性用於指定動畫重複的次數。它可以指定為infinite無限重複動畫。

用法:

animation-iteration-count:number|infinite|initial|inherit;

適當的價值：

數：此屬性值用於定義動畫播放的次數。預設值為1。
無窮：此屬性值指定動畫應播放無限次(永遠)。
初始：此屬性值用於將此屬性設置為其默認值。
繼承：此值用於從其父元素繼承此屬性。

例：用於說明animation-iteration-count的HTML程序

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            CSS | animation-iteration-count Property 
        </title> 
        <style>  
            .geeks {  
                font-size:40px;  
                text-align:center;  
                font-weight:bold;  
                color:#090;  
                padding-bottom:5px;  
                font-family:Times New Roman;  
            }  
              
            .geeks1 {  
                font-size:17px;  
                font-weight:bold;  
                text-align:center;  
                font-family:Times New Roman;  
            }  
              
            #one {  
                animation-name:example;  
                animation-duration:2s;  
                  
                /* Animation will be repeated twice */ 
                animation-iteration-count:2;  
            }  
              
            #two {  
                animation-name:example;  
                animation-duration:2s;  
                  
                /* Animation will be repeated infinitely */ 
                animation-iteration-count:infinite;  
            }  
            @keyframes example {  
                from {  
                    background-color:orange;  
                }  
                to {  
                    background-color:white;  
                }  
            }  
        </style>  
    </head>  
    <body>  
        <div class = "geeks"> 
            GeeksforGeeks 
        </div>  
          
        <div class = "geeks1"> 
            A computer science portal for geeks 
        </div> 
          
        <!-- Animation of the text inside the h2 tag   
             below will be repeated twice only -->
        <h2 id="one"> 
            This text changes its color two times. 
        </h2>  
          
        <!-- Animation of the text inside the h2 tag  
             below will be repeated infinitely -->
        <h2 id="two"> 
            This text changes its color infinite times. 
        </h2>  
    </body>  
</html>

支持的瀏覽器：下麵列出了animation-iteration-count屬性支持的瀏覽器：

穀歌瀏覽器43.0
Internet Explorer 10.0
Firefox 16.0
Opera 30.0
Safari 9.0

相關用法

注：本文由純淨天空篩選整理自vt_m大神的英文原創作品 CSS | animation-iteration-count Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。