css3動畫屬性--transition（轉換），css3--transition

css3動畫屬性--transition（轉換），css3--transition

css3的transition允許css的屬性值在一定的時間區間內平滑地過渡。

文法：

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

transition主要包含四個屬性值： transition-property（變換的屬性）， transition-duration（變換延續的時間）， transition-timing-function（在延續時間段，變換的速率變化）， transition-delay（變換延遲時間）。

transition-property：

指定當元素其中一個屬性改變時執行transition效果，其主要有以下幾個值：none(沒有屬性改變)；all（所有屬性改變）這個也是其預設值；indent（元素屬性名稱）。當其值為none時，transition馬上停止執行，當指定為all時，則元素產生任何屬性值變化時都將執行transition效果，indent是可以指定元素的某一個屬性值。並不是什麼屬性改變都為觸發transition動作效果，比如頁面的自適應寬度，當瀏覽器改變寬度時，並不會觸發transition的效果。

transition-duration：

指定元素轉換過程的期間，取值：<time>為數值，單位為s（秒）或者ms(毫秒)，可以作用於所有元素，包括:before和:after虛擬元素。其<time>預設值是0，也就是變換時是即時的。

transition-timing-function：

transition-timing-function的值允許你根據時間的推進去改變屬性值的變換速率，transition-timing-function有6個可能值：

1、ease：（逐漸層慢）預設值，ease函數等同於貝茲路徑(0.25, 0.1, 0.25, 1.0).
2、linear：（勻速），linear 函數等同於貝茲路徑(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函數等同於貝茲路徑(0.42, 0, 1.0, 1.0).
4、ease-out：（減速），ease-out 函數等同於貝茲路徑(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然後減速），ease-in-out 函數等同於貝茲路徑(0.42, 0, 0.58, 1.0).
6、cubic-bezier：（該值允許你去自訂一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。所有值需在[0, 1]地區內，否則無效。具體：

transition-delay：

指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行transition效果，其取值：<time>為數值，單位為s（秒）或者ms(毫秒)，其使用和transition-duration極其相似，也可以作用於所有元素，包括:before和:after虛擬元素。 預設大小是0，也就是變換立即執行，沒有延遲。

使用案例：

elem {    -moz-transition: background 0.5s ease-in,color 0.3s ease-out;    -webkit-transition: background 0.5s ease-in,color 0.3s ease-out;    -o-transition: background 0.5s ease-in,color 0.3s ease-out;    transition: background 0.5s ease-in,color 0.3s ease-out;  }