目前有兩個主流的方法在web上建立動畫：使用css或js。到底選擇哪種方法來實現動畫，完全取決於你的專案以及你想要達到的效果。
tips:
很多基礎的動畫都可以通過css或js來實現，但兩者的效果和時間會有差別。兩種方式各有千秋：
如果你已經用了類似jquery的包含動畫函式的js框架，你會發現用它來控制動畫比css方便的多。
毫無疑問css動畫是最簡單的一種讓螢幕上的元素動起來的方式。
下面的css**會將乙個元素在x軸和y軸上移動100px。完成這個功能需要css trasition，並設定為500ms。當move這個class被新增時，transform的值會發生改變，過渡開始
.box
.box.move
box.classlist.add('move');var box = document.queryselector('.box');
box.addeventlistener('transitionend', ontransitionend, false);
function ontransitionend()
如果你是動畫新手，對於手繪動畫而言關鍵幀（keyframes）是很重要的概念。動畫會生成一些特殊的幀來實現乙個動作，這種幀叫做keyframes，這種幀能夠捕捉某些動作的最極端的部分。css動畫也有相似的過程，通過設定css的相關屬性在目標點的時候什麼值就可以了。
舉乙個例子，讓盒子的動畫跟上例一樣，只是不需要任何像click的事件觸發，並且無限重複。你可以同時改變多個屬性：
/**
* this is a simplified version without
* vendor prefixes. with them included
* (which you will need) things get far
* more verbose!
*/.box
@keyframes movingbox
25%
50%
100%
}
animation-name屬性來選擇需要的動畫。css動畫目前還需要寫字首，在chrome,safari,opera,safari mobile以及android browser中均需要新增-webkit-字首。ie和firefox均不需要寫字首。有很多任務具會幫你在需要新增字首的屬性上新增字首，這樣在源**中就可以不需要乙個個新增字首了。
跟css動畫相比，js動畫更複雜一些，但會給開發者更多的動畫能力。推薦的做法是使用requestanimationframe，在動畫的每個幀上來確定元素的每個屬性值。（關於requestanimationframe，可參考html5探秘：用requestanimationframe優化web動畫）
你應該見到過很多用setinterval或者settimeout來實現動畫的**。然而這是乙個不好的方法，動畫會不能跟螢幕同步重新整理，而且很容易劇烈變化或者跳出。你需要避免這樣的**，盡量使用requestanimationframe，它能夠正確的同步。
下面的例子是你需要寫的js**，實現上面用css實現的效果：
function box () ;
function update()
}var box = new box();
box.startanimation();
.animate()函式。如果不是，你可以參考強大的greensock』s tweenmax，還有乙個輕量級的tweenlite。 css動畫 幀動畫
動畫 animation 設定關鍵幀 從左上，到右上，到右下的動畫 上面是系統性動畫屬性，下面拆分 animation 綜合性的動畫設定屬性 animation name 動畫名稱 animation duration 動畫的時間週期 animation timing function 動畫變化的速...
譯 高效的 「box shadow」 動畫
如何才能防止在給box shadow製作動畫過渡時導致的每一幀都要進行的重繪 re paint 從而提高頁面的效能？答案就是 不可能。給變化的box shadow製作動畫會大大縮減頁面渲染的效能。但是，這裡依然有類似的方法實現相同的效果。盡量的減少重繪的次數，可以保證你的動畫能夠保證在60 fps左...
CSS動畫標籤
keyframes 規則用於建立動畫。它的三個必要的值如下 animationname 定義動畫的名稱 keyframes selector 必需。動畫時長的百分比 css styles 乙個或多個合法的 css 樣式屬性 animation name 規定需要繫結到選擇器的 keyframe 名稱...