這里我們要使用 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貝塞爾曲線，可以做到很多效果，大家可以上這個網址去試一試貝塞爾曲線實現的動畫。

相關推薦