這里我們要使用 transition 標簽
- 原文來源：詳情
效果預覽
請把鼠標指針移動到藍色的 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]區域內，否則無效。
<!-- wp:paragraph -->
<p>//Mozilla內核</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>-moz-transition ：</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>//Webkit內核</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>-webkit-transition ：</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>//Opera</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>-o-transition ：</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>//W3C 標準</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>transition ：</p>
<!-- /wp:paragraph -->下面實例，演示，鼠標經過時，改變div寬度，平滑改變，帶動畫
CSS:
.n-box
{
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 */
}
.n-box:hover/*觸發*/
{
width:300px;
}HTML：
<div class="n-box">div>
<p>請把鼠標指針移動到藍色的 div 元素上，就可以看到過渡效果。p>
<p><b>注釋：b>本例在低版本 Internet Explorer 中無效。p>相關補充
- 原文來源：詳情
transition有一個特性，只要是帶有數值類型的屬性（例如：% , rgba() , rgb() , hsla() , 數字等），在其發生變化的時候，均會被觸發動畫效果。
因此，不管:hover偽類什么時候丟掉我的動畫，也不管我:hover時，元素動畫走到了什么地步。只要元素本身帶有transitioin，該動畫便會從當前動畫執行到的地方，以相同的時間返回原樣。
這只是最簡單的動畫實現，但對于目前大部分需求來說，配合配合貝塞爾曲線，已經足夠用了。
你僅僅需要做到，hover中的最終樣式，保證為數值樣式變OK了。
像display:block變為display:none就不好使了，此時我們可以用visibilty:1變為visibilty:0，同樣也可以簡單實現顯示到隱藏的效果。
另外加一句，不太清楚transition屬性的可以自行去百度去，transition-timing-function屬性定義的速度曲線，使用cubic-bezier貝塞爾曲線，可以做到很多效果，大家可以上這個網址去試一試貝塞爾曲線實現的動畫。
