我們知道許多網頁動态特效都是由FLASH或JQUERY之類的JS特效庫實作的，實際上現在CSS3也能實作很多類似效果了，隻是在各種浏覽器中相容性稍差，想要追求簡單極緻的效果，就要失去相容性，而且随着時間變遷，浏覽器标準終究可能還是要統一的。CSS3的Transition屬性，這種效果可以在滑鼠單擊、獲得焦點、被點選或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值。
以下為執行個體代碼：html>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s;
-webkit-transition:width 2s;
-o-transition:width 2s;
}
div:hover
{
width:300px;
}
請把滑鼠指針移動到藍色的 div 元素上，就可以看到過渡效果。
注釋：本例在低版本 Internet Explorer 中無效。
transition:顔色 變換延續的時間 變換速率
transition:background-color 0.3s linear
變換速率：
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]區域内，否則無效。
//Mozilla核心
-moz-transition ：
//Webkit核心
-webkit-transition ：
//Opera
-o-transition ：
//W3C 标準
transition ：