CSS過渡效果（transition）

145385 閱讀 0 評(píng)論 0 點(diǎn)贊

通常當(dāng) CSS 的屬性值更改后，瀏覽器會(huì)立即更新相應(yīng)的樣式，例如當(dāng)鼠標(biāo)懸停在元素上時(shí)，通過 :hover 選擇器定義的樣式會(huì)立即應(yīng)用在元素上。在 CSS3 中加入了一項(xiàng)過渡功能，通過該功能您可以將元素從一種樣式在指定時(shí)間內(nèi)平滑的過渡到另一種樣式，類似于簡(jiǎn)單的動(dòng)畫，但無需借助 flash 或 JavaScript。

CSS 中提供了 5 個(gè)有關(guān)過渡的屬性，如下所示：

transition-property	設(shè)置元素中參與過渡的屬性
transition-duration	設(shè)置元素過渡的持續(xù)時(shí)間
transition-timing-function	設(shè)置元素過渡的動(dòng)畫類型
transition-delay	設(shè)置過渡效果延遲的時(shí)間，默認(rèn)為 0
transition	簡(jiǎn)寫屬性，用于同時(shí)設(shè)置上面的四個(gè)過渡屬性

要成功實(shí)現(xiàn)過渡效果，必須定義以下兩項(xiàng)內(nèi)容：

（1）元素中參數(shù)與過渡效果的屬性；

（2）過渡效果持續(xù)的時(shí)間。

提示：過渡效果通常會(huì)在鼠標(biāo)懸停在元素上時(shí)發(fā)生，如果未設(shè)置過渡持續(xù)的時(shí)間，則過渡效果不會(huì)生效，因?yàn)檫^渡時(shí)間的默認(rèn)值為 0。

1. transition-property

transition-property 屬性用來設(shè)置元素中參與過渡的屬性名稱，語法格式如下：

transition-property: none | all | property;

參數(shù)說明如下：

none：表示沒有屬性參與過渡效果；

all：表示所有屬性都參與過渡效果；

property：定義應(yīng)用過渡效果的 CSS 屬性名稱列表，多個(gè)屬性名稱之間使用逗號(hào),進(jìn)行分隔。

示例代碼如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

運(yùn)行結(jié)果：

transition-property

2. transition-duration

transition-duration 屬性用來設(shè)置過渡需要花費(fèi)的時(shí)間（單位為秒或者毫秒），語法格式如下：

transition-duration: time;

其中，time 為完成過渡效果需要花費(fèi)的時(shí)間（單位為秒或毫秒），默認(rèn)值為 0，意味著不會(huì)有效果。

如果有多個(gè)參與過渡的屬性，也可以依次為這些屬性設(shè)置過渡需要的時(shí)間，多個(gè)屬性之間使用逗號(hào)進(jìn)行分隔，例如transition-duration: 1s, 2s, 3s;。除此之外，也可以使用一個(gè)時(shí)間來為所有參與過渡的屬性設(shè)置過渡所需的時(shí)間。示例代碼如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: .25s, 1s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3. transition-timing-function

transition-timing-function 屬性用來設(shè)置過渡動(dòng)畫的類型，屬性的可選值如下：

4. transition-delay

transition-delay 屬性用來設(shè)置過渡效果何時(shí)開始，屬性的語法格式如下：

transition-delay: time;

其中，參數(shù) time 用來設(shè)置在過渡效果開始之前需要等待的時(shí)間，單位為秒或毫秒。

5. transition

transition 屬性是上面四個(gè)屬性的簡(jiǎn)寫形式，通過該屬性可以同時(shí)設(shè)置上面的四個(gè)屬性，屬性的語法格式如下：

transition: transition-property transition-duration transition-timing-function transition-delay;

transition 屬性中，transition-property 和 transition-duration 為必填參數(shù)，transition-timing-function 和 transition-delay 為選填參數(shù)，如非必要可以省略不寫。另外，通過 transition 屬性也可以設(shè)置多組過渡效果，每組之間使用逗號(hào)進(jìn)行分隔，示例代碼如下：

點(diǎn)贊(0)