通過(guò) CSS3，我們可以在不使用js的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。他的屬性為：transition，但是他也有他的缺點(diǎn)，Internet Explorer 9 以及更早的版本，不支持 transition 屬性。那么他是怎么應(yīng)用的呢，比如我們官網(wǎng)首頁(yè)服務(wù)流程的幾個(gè)小圖標(biāo)，鼠標(biāo)滑上去會(huì)轉(zhuǎn)動(dòng)：

他的樣式是這樣去寫(xiě)的：

transition:transform 1s ease-out 0s;

font-style:italic;

這樣的話當(dāng)鼠標(biāo)滑過(guò)變成另一種樣式就有了一個(gè)過(guò)渡效果。那么他具體有那些屬性呢：

如果你想讓他變寬，時(shí)間長(zhǎng)為兩秒，你就可以這樣去寫(xiě)，

div

{

transition: width 1s;

-moz-transition: width 1s; /* Firefox 4 */

-webkit-transition: width 1s; /* Safari 和 Chrome */

-o-transition: width 1s; }/* Opera */

}

不同的瀏覽器兼容的寫(xiě)法是不一樣的，上面已標(biāo)明。如果是變化高度，只需要把width改成height即可

具體屬性為：transition-property：規(guī)定應(yīng)用過(guò)渡的 CSS 屬性的名稱。transition-duration：定義過(guò)渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。transition-timing-function：規(guī)定過(guò)渡效果的時(shí)間曲線。默認(rèn)是 "ease"。transition-delay：規(guī)定過(guò)渡效果何時(shí)開(kāi)始。默認(rèn)是 0。

注意：如果網(wǎng)站要求兼容IE 那么還是不建議去使用。因?yàn)檫@個(gè)屬性只兼容到IE10，IE9及以下不兼容！