過渡——CSS3動態(tài)效果 過渡屬性

一、什么是過渡：

• 通過 css3 可以在不使用 flash 動畫或 javascript 的情況下，為元素從一種樣式變換為另一種樣式時添加過渡效果。
• css3 過渡就是元素從一種樣式逐漸改變?yōu)榱硪环N的效果，需要確定兩點：

  需要添加效果的 css 屬性

  效果的時長

二、過渡屬性：

過渡有四個屬性：transition-property 、transition-duration 、transition-timing-function 、transition-delay

1、transition-property

定義：

此屬性可以設(shè)置添加過渡的 css 樣式，可以單獨設(shè)置只有某一個 css 屬性具有過渡效果（property），也可以設(shè)置所有屬性都有過渡效果（all）

屬性：

transition-property 有三個屬性值：none、all、property

• 注意：在上面的案例中，雖然寬和高會獲得過渡效果，但是你并不能看不出來，因為沒有設(shè)置過渡時長。我們在上面提到，設(shè)置過渡，屬性名和時長是必須要設(shè)置的，下面我們就來看過度時長的屬性如何設(shè)置。
• property 定義應(yīng)用過渡效果的css屬性名稱列表，列表以逗號分隔，例如

.box {
    width: 200px;
    height: 200px;
    background-color: blue;
    transition-property: width,height;
}
.box:hover {
    width: 300px;
    height: 300px;
    background-color: red;
}

此時寬和高會獲得過渡效果，但是背景顏色不會獲得過渡效果。因為我們的 transition-property 里面沒有添加屬性值 background-color 。

• property 表示可以把屬性名一個一個列出來，并不是直接寫 property。
• all 所有屬性都會獲得過渡效果
• none 沒有屬性會獲得過渡效果

2、transition-duration 定義;

此屬性表示規(guī)定完成過渡效果需要多少秒或毫秒

屬性值：

transition-duration 只有一個屬性值：time。表示完成過渡效果需要花費的時間（以秒s或毫秒ms計算，默認(rèn)為0，意味著沒有效果）

有了這個屬性，上面的案例效果就可以展現(xiàn)出來了。

.box {
    width: 200px;
    height: 200px;
    background-color: blue;
    transition-property: width, height;
    transition-duration: 2s;
}
.box:hover {
    width: 300px;
    height: 300px;
    background-color: red;
}

此時將鼠標(biāo)放在我們的藍(lán)色盒子上，他的寬高會用2s變大，但是背景顏色會瞬間變大，因為我們并沒有給背景顏色添加過渡效果。

3、transition-timing-function 定義：

此屬性規(guī)定了過渡效果的速度，默認(rèn)值為ease 。

屬性值：

transition-timing-function 有五個屬性值：linear、ease、ease-in、ease-out、ease-in-out

• linear 勻速完成過渡
• ease 慢速開始、中間變快、慢速結(jié)束
• ease-in 慢速開始，后面勻速
• ease-out 慢速結(jié)束，前面勻速
• ease-in-out 慢速開始，中間勻速，慢速結(jié)束

.box {
    width: 200px;
    height: 200px;
    background-color: blue;
    transition-property: width, height;
    transition-duration: 2s;
    transition-timing-function: linear;
}
.box:hover {
    width: 300px;
    height: 300px;
    background-color: red;
}

在 transition-duration 的案例中，我們可以感受到那時的過渡變換過程是慢速開始、中間勻速、再慢速結(jié)束，因為那時我們沒有設(shè)置 transition-timing-function 的屬性值，他默認(rèn)為 ease 。此時我們將他設(shè)置為 linear ，我們可以感受到，此時他是全程勻速的。其他的屬性值，大家也自己嘗試一下，感受感受他們的不同吧。

4、transition-delay 定義：

此屬性定義：何時將開始過渡效果，也叫過渡延遲時間。

屬性值：

與 transition-duration 一樣，transition-delay 也只有一個屬性值：time。規(guī)定在過渡效果開始之前需要等待的時間（以秒s或毫秒ms計算），默認(rèn)為0，即立即開始過渡效果。

.box {
    width: 200px;
    height: 200px;
    background-color: blue;
    transition-property: width, height;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 2s;
}
.box:hover {
    width: 300px;
    height: 300px;
    background-color: red;
}

此案例中，藍(lán)色盒子會立即變成紅色盒子，但是會靜止2s，然后再用2s勻速變大到寬高都為300px。那靜止的2s即為 transition-delay 設(shè)定的屬性值。

三、過渡的簡寫

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

按照上面的順序，列出屬性值即可，屬性值中間用空格分開。

所以我們的最后一個案例也可以寫成：

.box {
    width: 200px;
    height: 200px;
    background-color: blue;
    transition: all 2s linear 2s;
}
.box:hover {
    width: 300px;
    height: 300px;
    background-color: red;
}

注意：此時的 transition-property 需要設(shè)置為 all 或者只設(shè)置一個值（width\height\backgroud-color）,設(shè)置為 all 時，width、height、background-color都具有過渡效果，設(shè)置單個屬性值時，其他兩個屬性值就不具有過渡效果，會立即變化。不可以將 transition-property 寫成 width,height，即：

.box {
    width: 200px;
    height: 200px;
    background-color: blue;
    transition: width,height 2s linear 2s;
}
.box:hover {
    width: 300px;
    height: 300px;
    background-color: red;
}

此時的 width 將不具有過渡效果，會立即變?yōu)?300px 。只有 height 會延遲2s ，然后花費 2s 變?yōu)?300px ，再停頓 2s 后，花費 2s 變回 200px 。

到此這篇關(guān)于CSS3動態(tài)效果 過渡屬性的文章就介紹到這了,更多相關(guān)CSS3動態(tài)效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論