制作動態的網頁是是前端工程師必備的技能，很好的實現動畫能夠極大的提高用戶體驗，增強交互效果，那么動畫有多少實現方式，一直對此有選擇恐懼症的我就總結一下，以便在開發的時候選擇最好的實現方式。
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中需要變化的屬性。
前綴：
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的名稱，也就是定義了關鍵幀的動畫的名稱,這個名稱用來區別不同的動畫。
duration:完成動畫所需要的時間（2s 或者 2000ms）
timing-function:完成動畫的速度曲線
delay：動畫開始之前的延遲
iteration-count：動畫播放次數
direction：是否輪流反向播放動畫（normal:正常順序播放，alternate下一次反向播放）如果把動畫設置為只播放一次，則該屬性沒有效果。
使用animation屬性制作動畫可以更加靈活的設置動畫幀，通過不同keyframe（動畫幀）的設置，實現很多優雅的效果，keyframe中的百分數是動畫完成總時間的比例。
animation是設置總的動畫效果，而keyframe中設置上相應的動畫名字，然后在keyframe中設置具體的動畫效果。當然由於是css3的屬性，仍然需要注意它的兼容性，加上必須的前綴。
例子：
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
1% {left:0px;}
20%{left:200px;}
50% {left:300px;}
100%{left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
1% {left:0px;}
20%{left:200px;}
50% {left:300px;}
100%{left:200px;}
}
</style>
<div></div>
3.Jquery的animate函數
語法：
$(selector).animate(styles,options)
styles:產生動畫的css樣式和值；
options={
speed:動畫的速度（可選參數：slow,normal,fase）
easing：動畫的速度函數（可選參數：swing，linear）
callback：動畫完成之后要執行的函數；
queue：是否放置在效果隊列中，是布爾值，為false則立即開始
specialEasing:styles參數的一個或多個屬性映射及對應的easing函數。}
$(myElement).animate({
left: 500,
top: 200
}, {
duration:'3000',
specialEasing: {
left: 'swing',
top: 'linear'
}
});
該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。
只有數字值可創建動畫（比如 "margin:30px"）。字符串值無法創建動畫（比如 "background-color:red"）。
可以使用的屬性有：（使用比如 "fontSize"來設置，而非 CSS 名稱（比如 "font-size"））
backgroundPosition，borderWidth，borderBottomWidth，borderLeftWidth
borderRightWidth，borderTopWidth，borderSpacing
margin，marginBottom，marginLeft，marginRight，marginTop
outlineWidth
padding，paddingBottom，paddingLeft，paddingRight，paddingTop
height，width
maxHeight，maxWidth，minHeight，minWidth
font，fontSize
bottom，left，right，top
letterSpacing，wordSpacing，lineHeight，textIndent
可見通過jquery的animation生成動畫的過程中可同時使用多個屬性，也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=，如（height:'+=150px'），還可以使用隊列機制進行步驟式的動畫如：
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
動畫就會按照順序一步一步實現，並且不用考慮兼容性，因為幾乎都兼容。
但是，animate函數只能夠實現一些數值屬性，能夠實現的變化非常有限制，而且使用這個函數時還要配合stop來使用，在達到某條件時終止動畫，設置比較復雜。
4.原生js動畫
原生js動畫利用js代碼，將動畫一步以函數的方式寫出來，可以實現多種動畫樣式，而且可以自己做兼容性處理，自己設立每一步的動畫效果，並且能夠完成比較復雜的效果，但是代碼量很大。如下面的例子：需要自己定義所有的動態函數，並進行計算、判斷和處理
<div id="odiv" class="odiv">
<div id="sdiv" class="sdiv">
</div>
</div>
<script language="javascript">
window.onload = function(){
var odiv = document.getElementById('odiv');
odiv.onmouseover = function(){
startMover(0);
}
odiv.onmouseout = function(){
startMover(-200);
}
}
var timer = null;
function startMover(a){//速度和目標值
clearInterval(timer);//執行當前動畫同時清除之前的動畫
var odiv = document.getElementById('odiv');
timer = setInterval(function(){
var speed = (a-odiv.offsetLeft)/10;//緩沖動畫的速度參數變化值
//如果速度是大於0，說明是向右走，那么就向上取整
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//Math.floor();向下取整
if(odiv.offsetLeft == a){
clearInterval(timer);
}
else{
odiv.style.left = odiv.offsetLeft+speed+'px';
}
},30);
}
</script>
5.插件
網上可以搜到很多封裝好的動畫插件，這些插件可以直接引入到頁面中，通過初試話和配置的方式進行設定，直接在頁面中展示動畫。
如：waves，textillate.js等等。
6.使用canvas制作動畫
我們還可以使用canvas在瀏覽器上畫圖，並且利用其api，制作動畫。canvas使用的地方非常多，尤其是在制作h5小游戲上。
同樣都是使用編碼的方式由前端開發工程師完成動畫效果，canvas要比原生js效率高的多，流暢的多。通過畫筆的方式，能夠輕松的實現更多的動畫效果。
至於canvas如何使用，請看我博客中正在連載的教程--html5 canvas常用api總結。
7.引用gif圖片
如果在需求特別緊急，而且動畫又特別復雜的情況下，自己沒有把握按時實現效果，或者代價太大，真的，別猶豫，上gif圖片吧，不要在技術上糾結了，雖然在工程師的角度上這樣做很low，但是，用戶的體驗是沒有影響的~所以，別糾結，就是要快！完成最重要了！
內容原創，轉載請注明出處：
作者：Jess_喵
來源：http://www.cnblogs.com/zhangwenjiajessy/p/6154703.html