CSS3 transition 屬性
實例
把鼠標(biāo)指針放到 div 元素上，其寬度會從 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 屬性是一個簡寫屬性，用于設(shè)置四個過渡屬性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注釋：請始終設(shè)置 transition-duration 屬性，否則時長為 0，就不會產(chǎn)生過渡效果。
| 默認(rèn)值： | all 0 ease 0 |
|---|---|
| 繼承性： | no |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.transition="width 2s" |
語法
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。 |
| transition-duration | 規(guī)定完成過渡效果需要多少秒或毫秒。 |
| transition-timing-function | 規(guī)定速度效果的速度曲線。 |
| transition-delay | 定義過渡效果何時開始。 |