CSS transition-duration用法及代碼示例

CSS中的transition-duration屬性用於指定完成過渡效果的時間長度(以秒或毫秒為單位)。

用法:

transition-duration:time|initial|inherit;

屬性值：

time:它用於指定完成過渡動畫的時間長度(以秒或毫秒為單位)。

用法:

transition-duration:time;

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS transition-duration Property  
        </title>  
          
        <style>  
            div {  
                width:100px;  
                height:70px;  
                background:green;  
                transition-property:width; 
                transition-duration:5s; 
                  
                /* For Firefox browser */ 
                -webkit-transition-property:width; 
                -webkit-transition-duration:5s; 
                transition-delay:.2s;  
                display:inline-block;  
            }  
              
            div:hover {  
                width:300px;  
            }  
        </style>  
    </head>  
      
    <body style = "text-align:center;">  
          
        <h1>GeeksforGeeks</h1>  
          
        <h2>Transition Property</h2>  
          
        <div>  
            <p>transition-duration:5s</p>  
        </div>  
    </body>  
</html>

輸出：

過渡前：
過渡後：

initial:它用於將transition-duration屬性設置為其默認值。 transition-duration的默認值為0。

用法:

transition-duration:initial;

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS transition-duration Property  
        </title>  
          
        <style>  
            div {  
                width:100px;  
                height:80px;  
                background:green;  
                transition-property:width; 
                transition-duration:initial; 
                  
                /* For Firefox browser */ 
                -webkit-transition-property:width; 
                -webkit-transition-duration:initial; 
                transition-delay:.2s;  
                display:inline-block;  
            }  
              
            div:hover {  
                width:300px;  
            }  
        </style>  
    </head>  
      
    <body style = "text-align:center;">  
          
        <h1>GeeksforGeeks</h1>  
          
        <h2>Transition Property</h2>  
          
        <div>  
            <p>transition-duration:initial;</p>  
        </div>  
    </body>  
</html>

輸出：

過渡前：
過渡後：

inherit:從其父級設置的transition-duration屬性的值。

用法:

transition-duration:inherit;

範例3：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            CSS transition-duration Property  
        </title>  
          
        <style>  
            div {  
                width:100px;  
                height:270px;  
                background:green;  
                transition-property:width; 
                transition-duration:inherit; 
                transition-timing-function:ease-in; 
                                transition-delay:.2s;  
                display:inline-block;  
            }  
              
            div:hover {  
                width:500px;  
            }  
        </style>  
    </head>  
      
    <body style = "text-align:center;">  
          
        <h1>GeeksforGeeks</h1>  
          
        <h2>Transition Property</h2>  
          
        <div>  
            <p>transition-duration:inherit</p>  
        </div>  
    </body>  
</html>

輸出：

過渡前：

輸出：

過渡後：

支持的瀏覽器：下麵列出了transition-duration屬性支持的瀏覽器：

Chrome 26.0、4.0 -webkit-
邊10.0
Firefox 16.0、4.0 -moz-
Opera 12.1，10.5 -o-
Safari 6.1、3.1 -webkit-

相關用法

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