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