# CSS3 過渡 ## CSS3 過渡 通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。 請把鼠標移動到下面的元素上： CSS3 過渡 ## 瀏覽器支持 | 屬性 | 瀏覽器支持 | | --- | --- | | transition | Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 屬性。 Safari 需要前綴 -webkit-。 注釋：Internet Explorer 9 以及更早的版本，不支持 transition 屬性。 注釋：Chrome 25 以及更早的版本，需要前綴 -webkit-。 ## 它如何工作？ CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。 要實現這一點，必須規定兩項內容： * 規定您希望把效果添加到哪個 CSS 屬性上 * 規定效果的時長 ### 實例 應用于寬度屬性的過渡效果，時長為 2 秒： ``` div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ } ``` 注釋：如果時長未規定，則不會有過渡效果，因為默認值是 0。 效果開始于指定的 CSS 屬性改變值時。CSS 屬性改變的典型時間是鼠標指針位于元素上時： ### 實例 規定當鼠標指針懸浮于 <div> 元素上時： ``` div:hover { width:300px; } ``` 注釋：當指針移出元素時，它會逐漸變回原來的樣式。 ## 多項改變 如需向多個樣式添加過渡效果，請添加多個屬性，由逗號隔開： ### 實例 向寬度、高度和轉換添加過渡效果： ``` div { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; } ``` ## 過渡屬性 下面的表格列出了所有的轉換屬性： | 屬性 | 描述 | CSS | | --- | --- | --- | | [transition](/cssref/pr_transition.asp "CSS3 transition 屬性") | 簡寫屬性，用于在一個屬性中設置四個過渡屬性。 | 3 | | [transition-property](/cssref/pr_transition-property.asp "CSS3 transition-property 屬性") | 規定應用過渡的 CSS 屬性的名稱。 | 3 | | [transition-duration](/cssref/pr_transition-duration.asp "CSS3 transition-duration 屬性") | 定義過渡效果花費的時間。默認是 0。 | 3 | | [transition-timing-function](/cssref/pr_transition-timing-function.asp "CSS3 transition-timing-function 屬性") | 規定過渡效果的時間曲線。默認是 "ease"。 | 3 | | [transition-delay](/cssref/pr_transition-delay.asp "CSS3 transition-delay 屬性") | 規定過渡效果何時開始。默認是 0。 | 3 | 下面的兩個例子設置所有過渡屬性： ### 實例 在一個例子中使用所有過渡屬性： ``` div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari 和 Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; } ``` ### 實例 與上面的例子相同的過渡效果，但是使用了簡寫的 transition 屬性： ``` div { transition: width 1s linear 2s; /* Firefox 4 */ -moz-transition:width 1s linear 2s; /* Safari and Chrome */ -webkit-transition:width 1s linear 2s; /* Opera */ -o-transition:width 1s linear 2s; } ```