transition屬性主要是用來對某個css屬性的變化過程進行控制，官方的介紹是”css
transitions allow property changes in css values to occur smoothly over a
specified duration.“。而我個人則簡單地了解為”在某個時間段内，平滑地改變某個css屬性。“。
transition又包含了四個子屬性，分别為property、duration、timing-function、delay。下面來一一介紹，在最後會給出一個簡單的執行個體和使用方法說明。
property針對了目前的某個css屬性進行設定。比如我要一個背景色時，則設定property值為background。
duration針對了過渡效果的持續時間。
timing-function算是transition屬性中最為複雜的一個了。它針對了過渡效果的，有多種特效展示。這裡得涉及到一個學術性的話題：貝茲曲線。說實話，我也沒搞的太明白，但w3c給出了一張曲線圖，一看就明白了（後附圖）。
介紹下預留的幾個特效：
ee: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear:
cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0,
1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out:
cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier(x1, y1, x2, y2)
為自定義，x1,x2,y1,y2的值範圍在[0, 1]
其中的cubic-bezier即為貝茲曲線中的繪制方法。先來看圖：
圖上有四點，p0-3，其中p0、p3是預設的點，對應了[0,0],
[1,1]。而剩下的p1、p2兩點則是我們通過cubic-bezier()自定義的。
參考閱讀：
w3c: ://www.w3.org/tr/-transitions/#transition-timing-function_tag
貝茲曲線：http://zh.wikedia.org/wiki/%e8%b2%9d%e8%8c%b2%e6%9b%b2%e7%b7%9a
duration針對了過渡效果的延遲執行時間。
1).
過渡單個屬性：
transition-property:opacity;
transition-duration:2s;
transition-timing-function:ease-in;
transition-delay:0;
2). 過渡多個屬性：
[1]. 上下一一對應型：
transition-property:opacity
left;
transition-duration:2s,
4s;
此時：opacity過渡時間為2s，left過渡時間為4s。
[2]. 循環對應型：
transition-property:opacity left width
height;
此時：opacity和width過渡時間為2s，left和height過渡時間為4s。
3). transition簡寫模式：
順序為：transition-property transition-duration
transition-timing-function
transition-delay
/*單個屬性：*/
-moz-transition:background
0.5s ease-out 0s;
/*多個屬性：*/
-moz-transition:background, 0.5s ease-out 0s,
color 0.4 ease-out 0s;
代碼：
<a
href="http://www.ihiro.org/" tar="_blank">ihiro.org</a>
css代碼：
<a href="http://www.ihiro.org/"
target="_blank">ihiro.org</a>
a { display:block; width:160px;
height:30px; line-height:30px; text-align:center; padding:10px;
background:#33589f; color:#fff; text-decoration:none;
text-transform:uppercase;
/*隻有當滑鼠移出後才處理*/
-moz-transition:background 0.2s linear
0s;
}
a:hover { background:#263c7b;
color:#f60;
text-shadow:2px 2px 10px
#f00;
/*
隻有當滑鼠移入時才處理
注：若a:hover中不寫transition,則會繼承a中的transition */
/*
1. 單個屬性
-moz-transition:background 0.5s ease-out 0s;
2.
多個屬性：
-moz-transition:background, 0.5s
ease-out 0s, color 0.4 ease-out 0s;
*/
-moz-transition:background 0.5s ease-out, color 0.4s
ease-out, text-shadow 0.3s linear;
}