教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

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

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

transition-delay屬性規(guī)定過渡效果何時開始,默認值為0,常用單位是秒(s)或者毫秒(ms)。transition-delay的屬性值可以為正整數(shù)、負整數(shù)和0。當設置為負數(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;

            /* 指定動畫慢速開始和結束的過渡效果 */
            -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

下面我們在上面的案例的基礎上演示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;

            /* 指定動畫慢速開始和結束的過渡效果 */
            -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>

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

延遲效果



猜你喜歡

transition-timing-function屬性值有哪些?怎么使用?

如何阻止瀏覽器默認行為和阻止事件傳播?

css3漸變屬性怎么使用?C3漸變用法教程

傳智教育HTML&JS+前端課程

0 分享到:
和我們在線交談!