CSS3 過渡
CSS3 過渡
通過 CSS3，我們可以在不使用 Flash 動(dòng)畫或 JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。
請(qǐng)把鼠標(biāo)移動(dòng)到下面的元素上：
CSS3 過渡
瀏覽器支持
| 屬性 | 瀏覽器支持 | ||||
|---|---|---|---|---|---|
| transition | |||||
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 屬性。
Safari 需要前綴 -webkit-。
注釋：Internet Explorer 9 以及更早的版本，不支持 transition 屬性。
注釋：Chrome 25 以及更早的版本，需要前綴 -webkit-。
它如何工作？
CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。
要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：
- 規(guī)定您希望把效果添加到哪個(gè) CSS 屬性上
- 規(guī)定效果的時(shí)長(zhǎng)
實(shí)例
應(yīng)用于寬度屬性的過渡效果，時(shí)長(zhǎng)為 2 秒：
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
注釋：如果時(shí)長(zhǎng)未規(guī)定，則不會(huì)有過渡效果，因?yàn)槟J(rèn)值是 0。
效果開始于指定的 CSS 屬性改變值時(shí)。CSS 屬性改變的典型時(shí)間是鼠標(biāo)指針位于元素上時(shí)：
實(shí)例
規(guī)定當(dāng)鼠標(biāo)指針懸浮于 <div> 元素上時(shí)：
div:hover
{
width:300px;
}
注釋：當(dāng)指針移出元素時(shí)，它會(huì)逐漸變回原來的樣式。
多項(xiàng)改變
如需向多個(gè)樣式添加過渡效果，請(qǐng)?zhí)砑佣鄠�(gè)屬性，由逗號(hào)隔開：
實(shí)例
向?qū)挾�、高度和轉(zhuǎn)換添加過渡效果：
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;
}
過渡屬性
下面的表格列出了所有的轉(zhuǎn)換屬性：
| 屬性 | 描述 | CSS |
|---|---|---|
| transition | 簡(jiǎn)寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。 | 3 |
| transition-property | 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。 | 3 |
| transition-timing-function | 規(guī)定過渡效果的時(shí)間曲線。默認(rèn)是 "ease"。 | 3 |
| transition-delay | 規(guī)定過渡效果何時(shí)開始。默認(rèn)是 0。 | 3 |
下面的兩個(gè)例子設(shè)置所有過渡屬性：
實(shí)例
在一個(gè)例子中使用所有過渡屬性：
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;
}
實(shí)例
與上面的例子相同的過渡效果，但是使用了簡(jiǎn)寫的 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;
}