制作動態的網頁是是前端工程師必備的技能，很好的實現動畫能夠極大的提高用戶體驗，增強交互效果，那么動畫有多少實現方式，一直對此有選擇恐懼癥的我就總結一下，以便在開發的時候選擇最好的實現方式。
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等等）
| 值 | 描述 |
|---|---|
| linear | 勻速（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 從慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 慢慢變快（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 慢慢變慢（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 先變快再到慢（等于 cubic-bezier(0.42,0,0.58,1)）。漸顯漸隱效果 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。 |
timing-delay:動畫效果的延遲觸發時間（2s 或者2000ms）。
默認值分別為：all 0 ease 0
transition抓住了所設置變化屬性的起始態和完成態，通過設定的速度曲線來完成動畫。可以涉及到各種變化的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中需要變化的屬性。
前綴：
新聞熱點
疑難解答
