【transition-duration】
是一個css3屬性，規定完成過度效果需要花費的時間（一秒或毫秒計）。
語法：transition-duration: time;
time ： 規定完成過渡效果需要花費的時間（以秒或毫秒計）。 默認值是 0，意味着不會有效果。
該屬性其實是transition屬性的一個子屬性，下面總結一下css3中的transition屬性：
【transition】
用於在一定的時間內平滑的過度，這種效果可以在鼠標單擊，獲取焦點，被點擊或對元素任何改變中觸發，並圓滑的以動畫效果改變CSS屬性的屬性值。
從定義可以知道transition是一個用於動畫過度的屬性，然而transiton屬性只不過是一個簡寫屬性，用於設置四個過度屬性，這
四個過度屬性分別是:
transition-property (執行變換的屬性 )
transition-duration (變換延續時間)
transition-timing-function (延續時間內，變換速率的變化)
transition-delay (變換延遲時間)
下面來分別介紹一下各個屬性
transition-property 即用來指定當元素其中一個屬性改變是執行transition效果
值:none(沒有屬性改變)，all(所有屬性都改變)或指定某一元素(比如color，background等屬性)。
transition-duration 是動畫執行的時間，單位(s)比如"0.1s"也可以寫成".1s"，它可以作用於任何元素，包括before和after偽元素。
transition-timing-function 動畫的執行方式
值:ease(逐漸慢下來)，linear(勻速)，ease-in(由慢到快)，ease-out(由快到慢)，ease-in-out(先慢到快再到慢)，cubic-bezier(該值允許你去自定義一個時間曲線)。
transition-delay 動畫延時時間基本用法與duration相同。
語法:
transition: <transition> [, <transition>]*
<transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>
這種寫法是比較簡單的寫法，我們也可以同時寫多個Transition效果，每個效果按照固定屬性的順序書寫如圖。
實例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style> .fk{ position:absolute; left:0; background:#00F; width:50px; height:50px; } .fk:hover{ position:absolute; left:500px; background:#F00; } .fk,fk:hover{ transition:background-color 3s ease,left 3s ease-in-out; } </style> </head> <body> <div class="fk"> <div> </body> </html>
該效果將以一個方塊從左向右移動並改變顏色
【opacity屬性】
也是一個css3屬性，該屬性用於設置元素的不透明度級別，所有的瀏覽器都支持這個屬性。
語法：opacity: value|inherit;
參數說明：
value ：規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。
inherit：應該從父元素繼承 opacity 屬性的值。
例如設置一個圖像的透明度：
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 針對 IE8 以及更早的版本 */
}
IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設定透明度。opacity 屬性能夠設置的值從 0.0 到 1.0。值越小
，越透明。
IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小，越透明。