首頁技術(shù)文章正文

transition-delay屬性用法：transition-delay屬性與過渡動作

更新時間:2021年11月01日15時25分來源:傳智教育瀏覽次數(shù):

transition-delay屬性規(guī)定過渡效果何時開始，默認(rèn)值為0，常用單位是秒(s)或者毫秒(ms)。transition-delay的屬性值可以為正整數(shù)、負(fù)整數(shù)和0。當(dāng)設(shè)置為負(fù)數(shù)時，過渡動作會從該時間點(diǎn)開始，之前的動作被截斷;設(shè)置為正數(shù)時，過渡動作會延遲觸發(fā)。其基本語法格式如下。

transition-delay: time;

我們先來看個案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition-timing-function</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: yellow;
            border: 5px solid red;
            border-radius: 0px;
        }
        div:hover {
            border-radius: 105px;

            /* 指定動畫過渡的CSS屬性 */
            -webkit-transition-property: border-radius;
            -moz-transition-property: border-radius;
            -o-transition-property: border-radius;

            /* 指定動畫過渡時間 */
            -webkit-transition-duration: 3s;
            -moz-transition-duration: 3s;
            -o-transition-duration: 3s;

            /* 指定動畫慢速開始和結(jié)束的過渡效果 */
            -webkit-transition-timing-function: ease-in-out;
            -moz-transition-timing-function: ease-in-out;
            -o-transition-timing-function: ease-in-out;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

我們先來看看效果

transition-timing-function

下面我們在上面的案例的基礎(chǔ)上演示transition-delay屬性的用法，在第30行代碼后增加如下樣式。

/*指定動畫延遲觸發(fā)*/
-webkit-transition-delay：2s;　　　　　/*Safari andChrome瀏覽器兼容代碼*/
-moz-transition-delay：2s;　　　　　　 /*Firefox瀏覽器兼容代碼*/
-o-transition-delay：2s;　　　　　　　　/*Opera瀏覽器兼容代碼*/

上述代碼使用transition-delay屬性指定過渡的動作會延遲2s觸發(fā)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition-delay</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: yellow;
            border: 5px solid red;
            border-radius: 0px;
        }
        div:hover {
            border-radius: 105px;

            /* 指定動畫過渡的CSS屬性 */
            -webkit-transition-property: border-radius;
            -moz-transition-property: border-radius;
            -o-transition-property: border-radius;

            /* 指定動畫過渡時間 */
            -webkit-transition-duration: 3s;
            -moz-transition-duration: 3s;
            -o-transition-duration: 3s;

            /* 指定動畫慢速開始和結(jié)束的過渡效果 */
            -webkit-transition-timing-function: ease-in-out;
            -moz-transition-timing-function: ease-in-out;
            -o-transition-timing-function: ease-in-out;

            /*指定動畫延遲觸發(fā)*/
            -webkit-transition-delay:3s;　　　　　/*Safari andChrome瀏覽器兼容代碼*/
            -moz-transition-delay:3s;　　　　　　 /*Firefox瀏覽器兼容代碼*/
            -o-transition-delay:3s;　　　　　　　 /*Opera瀏覽器兼容代碼*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

刷新頁面，當(dāng)鼠標(biāo)指針懸浮到網(wǎng)頁中的<div>區(qū)域時，經(jīng)過2s后過渡的動作會被觸發(fā)，正方形慢速開始變化，然后逐漸加速，隨后慢速變?yōu)檎龍A形。我們來看看效果：

延遲效果