CSS transition-delay用法及代码示例

CSS中的transition-delay属性用于指定开始过渡的时间。 transition-delay的值以秒或毫秒为单位设置。

用法:

transition-delay:time|initial|inherit;

属性值：

time:它指定开始过渡动画的时间长度(以秒或毫秒为单位)。

例：

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

输出：

initial:它将transition-delay属性设置为其默认值。

例：

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

输出：

inherit:此属性从其父元素继承。

例：

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

输出：

注意：transition-delay属性的默认值为零。

支持的浏览器：下面列出了transition-delay属性支持的浏览器：

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

相关用法

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