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

transition-property屬性有幾個屬性值?

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

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

transition-property：none | all | property;

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

none：沒有屬性會的會獲得過渡效果;

all：所有屬性都將獲得過渡效果

property：定義應(yīng)用過渡效果的CSS屬性名稱，多個名稱之間用逗號分隔。

下面通過一個案例來演示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;
            /* 指定動畫過渡的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屬性改變元素背景色</div>
</body>
</html>

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

運行案例代碼，默認效果如下圖所示。

transition-property

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

ransition-duration屬性用于定義過渡效果花費的時間，默認值為0，常用單位是秒（s）或者毫秒（ms），其基本語法格式如下。

transition-duration: time;

通過transition-duration屬性，添加3秒中的延時。

<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;
        /* 指定動畫過渡的CSS屬性 */
        -webkit-transition-property: background-color;
        /* 設(shè)置設(shè)置過渡時為3秒,如果不設(shè)置默認為0,將不會看到過渡效果 */
        transition-duration: 3s;
        /* Safari andChrome瀏覽器兼容代碼 */
        -moz-transition-property: background-color;
        /* Opera瀏覽器兼容代碼 */
        -o-transition-property: background-color;
    }
</style>

添加延時后的效果：