css3 hover平滑過渡效果，鼠標通過元素，背景漸隱漸現效果

下面實例，演示，鼠標通過時，改變div寬度，平滑改變，帶動畫

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

div:hover
{
width:300px;
}

 

<div></div>

<p>請把鼠標指針移動到藍色的 div 元素上，就能夠看到過渡效果。</p>

<p><b>註釋：</b>本例在低版本 Internet Explorer 中無效。</p>

 

 

 

transition:顏色 變換延續的時間 變換速率

transition:background-color 0.3s linear

變換速率：

一、ease：（逐漸變慢）默認值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).

二、linear：（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).

三、ease-in：(加速)，ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).

四、ease-out：（減速），ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0).

五、ease-in-out：（加速而後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

六、cubic-bezier：（該值容許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。全部值需在[0, 1]區域內，不然無效。

//Mozilla內核

-moz-transition ：

//Webkit內核

-webkit-transition ：

//Opera

-o-transition ：

//W3C 標準

transition ：