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

transition-property屬性有幾個(gè)屬性值?

更新時(shí)間:2021年11月01日12時(shí)24分來(lái)源:傳智教育瀏覽次數(shù):

transition-property屬性用于指定應(yīng)用過(guò)渡效果的CSS屬性的名稱(chēng)，其過(guò)渡效果通常在用戶(hù)將指針移動(dòng)到元素上時(shí)發(fā)生。當(dāng)指定的CSS屬性改變時(shí)，過(guò)渡效果才開(kāi)始。其基本語(yǔ)法格式如下。

transition-property：none | all | property;

transition-property屬性有幾個(gè)屬性值？transition-property屬性的取值包括 none、all和property 三個(gè)，具體說(shuō)明如下所示。

none：沒(méi)有屬性會(huì)的會(huì)獲得過(guò)渡效果;

all：所有屬性都將獲得過(guò)渡效果

property：定義應(yīng)用過(guò)渡效果的CSS屬性名稱(chēng)，多個(gè)名稱(chēng)之間用逗號(hào)分隔。

下面通過(guò)一個(gè)案例來(lái)演示transition-property屬性的用法，如下代碼所示：

<!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-property屬性</title>
    <style>
        div{
            width: 400px;
            height: 100px;
            background-color:red;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
            color: #fff;
 
        }
        div:hover{
            background-color: blue;
            /* 指定動(dòng)畫(huà)過(guò)渡的CSS屬性 */
            -webkit-transition-property: background-color;
            /* Safari andChrome瀏覽器兼容代碼 */
            -moz-transition-property: background-color;
            /* Opera瀏覽器兼容代碼 */
            -o-transition-property: background-color;
        }
    </style>
</head>
<body>
    <div>使用transition-property屬性改變?cè)乇尘吧?lt;/div>
</body>
</html>

在上面案例中，通過(guò)transition-property屬性指定產(chǎn)生過(guò)渡效果的CSS屬性為background-color，并設(shè)置了鼠標(biāo)移上時(shí)背景顏色變?yōu)樗{(lán)色，如第14～15行代碼所示。另外，為了解決各類(lèi)瀏覽器的兼容性問(wèn)題，分別添加了-webkit-、-moz-、-o-等不同的瀏覽器前綴兼容代碼。

運(yùn)行案例代碼，默認(rèn)效果如下圖所示。

transition-property

當(dāng)鼠標(biāo)指針懸浮到網(wǎng)頁(yè)中的<div>區(qū)域時(shí)，背景色立刻由紅色變?yōu)樗{(lán)色，如圖所示，而不會(huì)產(chǎn)生過(guò)渡。這是因?yàn)樵谠O(shè)置“過(guò)渡”效果時(shí)，必須使用transition-duration屬性設(shè)置過(guò)渡時(shí)間，否則不會(huì)產(chǎn)生過(guò)渡效果。

ransition-duration屬性用于定義過(guò)渡效果花費(fèi)的時(shí)間，默認(rèn)值為0，常用單位是秒（s）或者毫秒（ms），其基本語(yǔ)法格式如下。

transition-duration: time;

通過(guò)transition-duration屬性，添加3秒中的延時(shí)。

<style>
    div{
        width: 400px;
        height: 100px;
        background-color:red;
        text-align: center;
        line-height: 100px;
        font-weight: bold;
        color: #fff;
    }
    div:hover{
        background-color: blue;
        /* 指定動(dòng)畫(huà)過(guò)渡的CSS屬性 */
        -webkit-transition-property: background-color;
        /* 設(shè)置設(shè)置過(guò)渡時(shí)為3秒,如果不設(shè)置默認(rèn)為0,將不會(huì)看到過(guò)渡效果 */
        transition-duration: 3s;
        /* Safari andChrome瀏覽器兼容代碼 */
        -moz-transition-property: background-color;
        /* Opera瀏覽器兼容代碼 */
        -o-transition-property: background-color;
    }
</style>

添加延時(shí)后的效果：