制作動態的網頁是是前端工程師必備的技能，很好的實現動畫能夠極大的提高用戶體驗，增強交互效果，那么動畫有多少實現方式，一直對此有選擇恐懼癥的我就總結一下，以便在開發的時候選擇最好的實現方式。

1.css的transition。

語法：

transition: property duration timing-function delay;

property:填寫需要變化的css屬性如：width,line-height,font-size,color等;

duration:完成過渡效果需要的時間（2s 或者2000ms）

timing-function:完成效果的速度曲線（linear,ease,ease-in,ease-out等等）

timing-delay:動畫效果的延遲觸發時間（2s 或者2000ms）。

默認值分別為：all 0 ease 0

transition抓住了所設置變化屬性的起始態和完成態，通過設定的速度曲線來完成動畫?？梢陨婕暗礁鞣N變化的css屬性，默認為all，則所有變化的屬性都會在出發時，以動畫的形式展現出來。

這種動畫方式是css3的，因此ie9以下是不支持的，其他的瀏覽器需要加前綴，并且只有兩態，不支持自定義中間的狀態。

例子：

<style type="text/css"> 
div
{
width:100px;
height:100px;
background:red;
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;
}
</style>
<div></div>

tips：transform是一種變化屬性，該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。可以作為transition中需要變化的屬性。

前綴：

transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */　　

 2.css3的animation屬性

語法：

animation: name duration timing-function delay iteration-count direction;

name:keyframe的名稱，也就是定義了關鍵幀的動畫的名稱,這個名稱用來區別不同的動畫。