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

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抓住了所設置變化屬性的起始態和完成態，通過設定的速度曲線來完成動畫。可以涉及到各種變化的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中需要變化的屬性。

前綴：

1. transform:rotate(9deg);
2. -ms-transform:rotate(9deg); /* Internet Explorer */
3. -moz-transform:rotate(9deg); /* Firefox */
4. -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
5. -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，但是，用戶的體驗是沒有影響的~所以，別糾結，就是要快！完成最重要了！

 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。