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