# CSS3 transition 屬性 ## 實例 把鼠標指針放到 div 元素上，其寬度會從 100px 逐漸變為 300px： ``` div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ } ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。 Safari 支持替代的 -webkit-transition 屬性。 注釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 transition 屬性。 ## 定義和用法 transition 屬性是一個簡寫屬性，用于設置四個過渡屬性： * transition-property * transition-duration * transition-timing-function * transition-delay 注釋：請始終設置 [transition-duration](/cssref/pr_transition-duration.asp "CSS3 transition-duration 屬性") 屬性，否則時長為 0，就不會產生過渡效果。 | 默認值： | all 0 ease 0 | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 語法： | _object_.style.transition="width 2s" | | --- | --- | ## 語法 ``` transition: _property_ _duration_ _timing-function_ _delay_; ``` | 值 | 描述 | | --- | --- | | [transition-property](/cssref/pr_transition-property.asp "CSS3 transition-property 屬性") | 規定設置過渡效果的 CSS 屬性的名稱。 | | [transition-duration](/cssref/pr_transition-duration.asp "CSS3 transition-duration 屬性") | 規定完成過渡效果需要多少秒或毫秒。 | | [transition-timing-function](/cssref/pr_transition-timing-function.asp "CSS3 transition-timing-function 屬性") | 規定速度效果的速度曲線。 | | [transition-delay](/cssref/pr_transition-delay.asp "CSS3 transition-delay 屬性") | 定義過渡效果何時開始。 |