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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。