CSS3的出現(xiàn)最引人注意的地方莫過于css動畫（CSS Animation）了,，而css3過渡（CSS Transition）讓動畫變的生動更逼真,。今天就帶大家一起來認(rèn)識一下CSS Transition。

CSS3 Transitions

有了它,，我們從一種效果轉(zhuǎn)換到另一種效果而無需javascript或flash,我們只需一段CSS代碼而已,。

瀏覽器支持

屬性	瀏覽器
transition

Internet Explorer不支持過渡屬性。

Firefox4需要前綴-moz-,。

Chrome和Safari需要前綴-webkit-,。

Opera需要前綴-o-。

它是如何工作,？

CSS3的過渡效果,，讓一個元素從一種效果轉(zhuǎn)換到另一種效果,。

要做到這一點,，你必須指定兩件事：

1. 指定要添加效果的CSS屬性
2. 指定效果的持續(xù)時間。

舉例說明：

    div
    {
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari and Chrome */
    -o-transition: width 2s; /* Opera */
    }

注意：如果未指定動畫延遲時間，過渡將沒有任何效果,，因為默認(rèn)值是0。

鼠標(biāo)放上去的時候,，變換開始：

    div:hover
    {
    width:300px;
    }

在哪里定義動畫效果,？

css3動畫一般通過鼠標(biāo)事件或者說狀態(tài)定義動畫，通常我們可以用CSS中偽類和js中的鼠標(biāo)事件來定義,。

js的事件也可以,，比如click，focus,，mousemove,mouseover,mouseout等等

transition的基本語法：

css3動畫通過transition屬性和其他css屬性（顏色,，寬高，變形,，位置等等）配合來實現(xiàn)。

transition的語法：

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

當(dāng)然這是簡寫,，我們也可以完整的寫：

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*,；

transition-duration ： <time> [, <time>]*

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

transition-delay ： <time> [, <time>]*

那些屬性可以變換,？

transition-property:要變化的屬性，比如元素變寬則是width,，文字顏色要變色這是W3C給出了一個可變換屬性的列表：

幾乎所有的有色彩,、大小或位置等組件的CSS屬性,，包括許多新添加的CSS3屬性,， 都可以應(yīng)用變換,。一個值得注意的例外是box-shadow,，不過部分瀏覽器還是對box-shadow添加了支持,。

該取值還有個強大的“all”取值,，表示上表所有屬性,；

除了以上屬性外,，當(dāng)然還有css3中大放異彩的css3變形,，比如放大縮小,，旋轉(zhuǎn)斜切,，漸變等等,。

動畫時間

transition-duration ：動畫執(zhí)行的時間,，以秒為單位，比如0.1秒可以寫成”0.1s”或者”.1s”,，注意后面有個“s”單位,。

動畫執(zhí)行的計算方式

transition-timing-function ：動畫執(zhí)行的計算方式,，這里時間函數(shù)是令人崩潰的貝塞爾曲線,，幸好css3提過了幾個取值：

ease：逐漸慢下來，函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).

linear：線性過度,函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).

ease-in：由慢到快,函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).

ease-out：由快到慢, 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).

ease-in-out：由慢到快在到慢, 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

cubic-bezier：特定的cubic-bezier曲線,。 (x1, y1, x2, y2)四個值特定于曲線上點P1和點P2,。所有值需在[0, 1]區(qū)域內(nèi),，否則無效,。

動畫延遲

transition-delay：在動作和變換開始之間等待多久，通常用秒來表示(比如, .1s),。如果你不想延遲,，該值可省略。

重疊動畫

經(jīng)常會碰到同一元素會有多個動畫同時執(zhí)行的時侯,，比如文字顏色和背景同時變化：

-webkit-transition: color .25s linear , background-color 1s linear;

和transform(變形)結(jié)合的一些動畫

這時候transition-property建議取值為“all”,；

典型的應(yīng)用舉例：

放大縮小：

#scale { -webkit-transition: all .3s ease-in-out; }

#scale:hover { -webkit-transform: scale(1.5); }

旋轉(zhuǎn)：

#rotate { -webkit-transition: all 1s ease-in-out;}

#rotate:hover {-webkit-transform: rotate(720deg);}