對於Web開發者來說，不管什麼細分方向，比如數據可視化、網站系統、電商網站等等，都會涉及到一個難題“動畫”。因為動畫關係到Web開發的兩個比較重要的點，一是視覺效果，二是用戶體驗，通過酷炫動畫效果可以給視覺加不少分，同樣，恰到好處的微動效也會給用戶體驗帶來不錯的驚喜，基於此，我們的Web動畫該如何實現，他有哪些實現方式呢？

動畫形式大概梳理了下，動畫有不止以下幾種形式：
一、CSS3動畫
二、JS動畫
三、Canvas動畫
四、SVG動畫
五、以Three.js為首的3D動畫
針對以上動畫形式，我們來簡單介紹下吧。

一、CSS3動畫

CSS3動畫是我目前工作中用到最多的動畫形式，因為它書寫簡單，性能好，不需要懂JavaScript也能寫動畫，甚至可以實現一些三維立體效果。CSS3動畫又包含幾種，比如，transform，transition，animation。

Transform（變形）

transform變包含了rotate（旋轉）、scale（縮放）、translate（移動）、skew（扭曲）以及matrix（矩陣變形）。我們一般會結合transition來使用，使元素變形的過程變的平滑。

Transition（過渡）

CSS3中的transition是讓元素的屬性值在一定時間區間內平滑過渡，還可以定義變換速率。不是所有的屬性都支持過渡的，或者說有很多屬性都支持過渡，所以最好還是了解下，沒準下次我們就能創造不一樣的動畫效果了呢！

屬性名稱	類型
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

Animation（動畫）

“關鍵幀”是指在某個時間點上，定義元素的狀態，如果把動畫時間區間裡面，每個時間點都定義元素狀態，這種叫逐針動畫，這種形式一般用在動畫軟件製作上才會用到，因為製作成本高，所以我們一般會採用另一種更方便、更簡單的實現方式，就是補間動畫。補間動畫是指我們定義好兩個時間節點上元素的狀態，中間元素變化的過程由計算機幫我們計算好，比如下面的例子：

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

二、JS動畫

JS動畫一般是通過定時器和計時器來實現元素屬性的不斷變化，這裡一般常用的有jQuery的animate()方法。JS動畫這裡不做太多介紹，因為我平時用的也不多。

三、Canvas動畫

<canvas id="canvas" width="500" height="500"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var canvasWidth = context.canvas.width;//動畫的寬
    var canvasHeight = context.canvas.height;//動畫的高
    var x = 0;
    function animation(){
        x++;//用於更新動畫元素的X坐標位置
        context.clearRect(0, 0, canvasWidth, canvasHeight);//清除動畫
        context.fillRect(x,250,10,10);//繪製一個橫向運動的矩形
        setTimeout(animation,33);        
    }
    animation();
</script>

四、SVG動畫

SVG入門可以學習《SVG精髓》這本書，關於SVG動畫方面下面簡單介紹一下。
<animate> SVG內置了一些動畫元素，比如：
屬性能隨時間改變屬性值
<animateMotion>屬性使元素沿著動作路徑移動
<animateTransform>屬性使SVG隨時間操作Transform，這與CSS3中的Transform屬性類似
<animateColor>屬性隨時間修改對應屬性的顏色值
但是因為以上動畫元素兼容性不是很好，所以建議大家盡量使用元素屬性來進行SVG的動畫製作，比如stroke-dasharry, stroke-dashoffset，可以實現描邊動畫，可以看下我之前做的案例。

五、以Three.js為首的3D動畫

Three.js是一個基於JavaScript，使用方便，運行在瀏覽器中的輕量級的3D框架，可以用它創建各種三維場景，包括攝影機，光影及材質等各種對象，並且提供了Canvas、SVG 、CSS 3D及WebGL4中渲染器。 目前兼容到IE10，需要降級處理。

裡面的動畫原理和Canvas動畫有點相同，也是通過Three.js的API接口，來不斷快速的改變元素屬性和狀態，形成動畫效果。 它不僅僅可以創建動畫效果，還可以創建元素對象，我們CSS中，元素對像一般是用CSS樣式來控制的，而Three.js可以直接通過JS創建元素對象。

總結

以上我們對Web動畫形式進行了簡單的介紹，我們平時最常用的還是CSS3動畫，我們也會根據項目需求，調整動畫形式，這裡我們沒有將如何製作一個動畫效果，而是大概念的梳理了下目前實現動畫的形式，讓大家在平時工作的過程中，不要專注於實現一個動畫而忘記了實現動畫有很多形式。對於復雜動畫我們有時會用幀動畫來實現，那幀動畫有哪些實現方式呢，我們後面也將繼續介紹。

（此篇文章為網路轉載，如有冒犯，請來信告知，當即刻移除！）