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