CSS animation-duration用法及代码示例

CSS中的animation-duration属性用于定义动画完成一个周期应花费的时间。也就是说，它用于指定播放动画的持续时间。

用法:

animation-duration:time|initial|inherit;

适当的价值：

时间：此值用于指定动画将完成一个周期的时间长度。可以以秒或毫秒为单位指定。默认值为0，这意味着将不会发生动画。
初始：此值用于将属性设置为其默认值。
继承：此值用于从其父元素继承属性。

例：用于说明CSS中animation-duration属性的HTML程序。

<!DOCTYPR html> 
<html> 
  
<head> 
    <title> 
        CSS | animation-duration Property 
    </title> 
    <style> 
        #gfg1 { 
            animation-name:text; 
            animation-duration:5s; 
            animation-iteration-count:infinite; 
        } 
          
        #geek1 { 
            font-size:40px; 
            text-align:center; 
            font-weight:bold; 
            color:#090; 
            padding-bottom:5px; 
        } 
          
        #geek2 { 
            font-size:17px; 
            font-weight:bold; 
            text-align:center; 
        } 
          
        @keyframes text { 
            from { 
                margin-top:400px; 
            } 
            to { 
                margin-top:0px; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <!-- The below div is animated for a duration of 5s  
       and will be played an infinite number of times -->
    <div id="gfg1"> 
        <div id="geek1"> 
            GeeksforGeeks 
        </div> 
        <div id="geek2"> 
            A computer science portal for geeks 
        </div> 
    </div> 
</body> 
  
</html>

支持的浏览器：下面列出了animation-duration属性支持的浏览器：

谷歌浏览器43.0
Internet Explorer 10.0
Firefox 16.0
Opera 30.0
Safari 9.0

相关用法

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