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

一、什么是過渡：

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

  需要添加效果的 css 屬性

  效果的時(shí)長

二、過渡屬性：

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

1、transition-property

定義：

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

屬性：

transition-property 有三個(gè)屬性值：none、all、property

• 注意：在上面的案例中，雖然寬和高會(huì)獲得過渡效果，但是你并不能看不出來，因?yàn)闆]有設(shè)置過渡時(shí)長。我們?cè)谏厦嫣岬?，設(shè)置過渡，屬性名和時(shí)長是必須要設(shè)置的，下面我們就來看過度時(shí)長的屬性如何設(shè)置。
• property 定義應(yīng)用過渡效果的css屬性名稱列表，列表以逗號(hào)分隔，例如

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

此時(shí)寬和高會(huì)獲得過渡效果，但是背景顏色不會(huì)獲得過渡效果。因?yàn)槲覀兊?nbsp;transition-property 里面沒有添加屬性值 background-color 。

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

2、transition-duration 定義;

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

屬性值：

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

有了這個(gè)屬性，上面的案例效果就可以展現(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;
}

此時(shí)將鼠標(biāo)放在我們的藍(lán)色盒子上，他的寬高會(huì)用2s變大，但是背景顏色會(huì)瞬間變大，因?yàn)槲覀儾]有給背景顏色添加過渡效果。

3、transition-timing-function 定義：

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

屬性值：

transition-timing-function 有五個(gè)屬性值：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 的案例中，我們可以感受到那時(shí)的過渡變換過程是慢速開始、中間勻速、再慢速結(jié)束，因?yàn)槟菚r(shí)我們沒有設(shè)置 transition-timing-function 的屬性值，他默認(rèn)為 ease 。此時(shí)我們將他設(shè)置為 linear ，我們可以感受到，此時(shí)他是全程勻速的。其他的屬性值，大家也自己嘗試一下，感受感受他們的不同吧。

4、transition-delay 定義：

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

屬性值：

與 transition-duration 一樣，transition-delay 也只有一個(gè)屬性值：time。規(guī)定在過渡效果開始之前需要等待的時(shí)間（以秒s或毫秒ms計(jì)算），默認(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)色盒子會(huì)立即變成紅色盒子，但是會(huì)靜止2s，然后再用2s勻速變大到寬高都為300px。那靜止的2s即為 transition-delay 設(shè)定的屬性值。

三、過渡的簡寫

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

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

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

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

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

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

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

最新評(píng)論