transition屬性用法【黑馬程序員CC3教程】

更新時(shí)間:2021-11-01 來(lái)源:黑馬程序員瀏覽量:

transition屬性是一個(gè)復(fù)合屬性，用于在一個(gè)屬性中設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay四個(gè)過(guò)渡屬性。其基本語(yǔ)法格式如下。

transition：property duration timing-function delay;

property: 指定應(yīng)用過(guò)渡效果的CSS屬性的名稱(chēng)，其過(guò)渡效果通常在用戶(hù)將指針移動(dòng)到元素上時(shí)發(fā)生。

duration: 指定設(shè)置過(guò)渡時(shí)間，否則不會(huì)產(chǎn)生過(guò)渡效果

delay: 規(guī)定過(guò)渡效果何時(shí)開(kāi)始，默認(rèn)值為0，常用單位是秒(s)或者毫秒(ms)。transition-delay的屬性值可以為正整數(shù)、負(fù)整數(shù)和0。當(dāng)設(shè)置為負(fù)數(shù)時(shí)，過(guò)渡動(dòng)作會(huì)從該時(shí)間點(diǎn)開(kāi)始，之前的動(dòng)作被截?cái)?設(shè)置為正數(shù)時(shí)，過(guò)渡動(dòng)作會(huì)延遲觸發(fā)。

在使用transition屬性設(shè)置多個(gè)過(guò)渡效果時(shí)，它的各個(gè)參數(shù)必須按照順序進(jìn)行定義，不能顛倒。如果中設(shè)置的四個(gè)過(guò)渡屬性，可以直接通過(guò)如下代碼實(shí)現(xiàn)。

/* 綜合寫(xiě)法 */
transition：border-radius 5s ease-in-out 2s;


/* 拆分寫(xiě)法 */

    /* 指定動(dòng)畫(huà)過(guò)渡的CSS屬性 */
    -webkit-transition-property: border-radius;		/*Safari andChrome瀏覽器兼容代碼*/
    -moz-transition-property: border-radius;		/*Firefox瀏覽器兼容代碼*/
    -o-transition-property: border-radius;		/*Opera瀏覽器兼容代碼*/
    
    /* 指定動(dòng)畫(huà)過(guò)渡時(shí)間 */
    -webkit-transition-duration: 3s;
    -moz-transition-duration: 3s;
    -o-transition-duration: 3s;
    
    /* 指定動(dòng)畫(huà)慢速開(kāi)始和結(jié)束的過(guò)渡效果 */
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    
    /*指定動(dòng)畫(huà)延遲觸發(fā)*/
    -webkit-transition-delay:3s;
    -moz-transition-delay:3s;
    -o-transition-delay:3s;

完整案例代碼：

<!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;
            transition: border-radius 3s ease-in-out 2s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

無(wú)論是單個(gè)屬性還是簡(jiǎn)寫(xiě)屬性，使用時(shí)都可以實(shí)現(xiàn)多個(gè)過(guò)渡效果。如果使用transition簡(jiǎn)寫(xiě)屬性設(shè)置多種過(guò)渡效果，需要為每個(gè)過(guò)渡屬性集中指定所有的值，并且使用逗號(hào)進(jìn)行分隔。

transition屬性用法