CSS3 transition 屬性
實(shí)例
把鼠標(biāo)指針?lè)诺?div 元素上，其寬度會(huì)從 100px 逐漸變?yōu)?300px：
div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
瀏覽器支持
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。
Safari 支持替代的 -webkit-transition 屬性。
注釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 transition 屬性。
定義和用法
transition 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置四個(gè)過(guò)渡屬性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注釋：請(qǐng)始終設(shè)置 transition-duration 屬性，否則時(shí)長(zhǎng)為 0，就不會(huì)產(chǎn)生過(guò)渡效果。
| 默認(rèn)值： | all 0 ease 0 |
|---|---|
| 繼承性： | no |
| 版本： | CSS3 |
| JavaScript 語(yǔ)法： | object.style.transition="width 2s" |
語(yǔ)法
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 規(guī)定設(shè)置過(guò)渡效果的 CSS 屬性的名稱。 |
| transition-duration | 規(guī)定完成過(guò)渡效果需要多少秒或毫秒。 |
| transition-timing-function | 規(guī)定速度效果的速度曲線。 |
| transition-delay | 定義過(guò)渡效果何時(shí)開(kāi)始。 |