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 ：