transition CSS屬性允許您定義元素在兩種狀態(tài)效果之間轉(zhuǎn)換。這是transition-property,transition-duration,transition-timing-function和transition-delay的簡(jiǎn)寫(xiě)屬性
下表為此屬性的用法說(shuō)明和版本歷史記錄,以及該屬性在javascript腳本中的使用語(yǔ)法。
| 默認(rèn)值: | all 0 ease 0; 查看全部屬性 |
|---|---|
| 適用于: | 所有元素::before和::after 偽元素 |
| 繼承: | 沒(méi)有 |
| 可動(dòng)畫(huà)制作: | 否。請(qǐng)參見(jiàn) 動(dòng)畫(huà)屬性。 |
| 版本: | CSS3的新功能 |
| JavaScript語(yǔ)法: | object.style.transition="width 2s" |
該屬性的語(yǔ)法如下:
transition: transition1 [, transition2,?...?transitionN] | initial | inherit where transition is: [ transition-property | transition-duration | transition-timing-function | transition-delay ]
下面的示例演示了如何使用transition屬性。
button {
background: #fd7c2a;
-webkit-transition-property: background 2s; /* For Safari 3.0+ */
transition: background 2s;
}
button:hover {
background: #3cc16e;
}測(cè)試看看?/?下表描述了此屬性的值。
| 值 | 描述 |
|---|---|
| transition-property | 指定應(yīng)將過(guò)渡效果應(yīng)用到的CSS屬性的名稱(chēng)。 |
| transition-duration | 指定過(guò)渡動(dòng)畫(huà)完成所需的秒數(shù)或毫秒數(shù)。 |
| transition-timing-function | 指定如何計(jì)算受過(guò)渡影響的CSS屬性的中間值。 |
| transition-delay | 指定何時(shí)開(kāi)始過(guò)渡。 |
| initial | 將此屬性設(shè)置為其默認(rèn)值。 |
| inherit | 如果指定,則關(guān)聯(lián)元素采用其父元素transition的屬性值。 |
transition屬性瀏覽器的兼容性,下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號(hào);所有主流瀏覽器均支持該屬性。
|
請(qǐng)參考以下教程:CSS3 Transitions。
相關(guān)屬性:transition-delay,transition-duration,transition-property,transition-timing-function。