AnimateMate

可能是最好的 Sketch 動畫插件。Sketch 目前被廣泛應用于 HTML5 的原型界面設計，或者被應用于數據可視化的，動畫部分則一般經由軟件 Principle 等實現。不過現在，你可以選擇一款實用的 Sketch 插件直接在 Sketch 中輸出高品質的 WEB 動畫。你可以向本公眾號回復「Animate」下載該插件。

Granim

一個騷氣的 js 庫。用于快速創建 WEB 內的令人嘆為觀止的漸變動畫，網址是▼

https://sarcadass.github.io/granim.js/

WAIT!

動效速度測試平臺。當我們在 WEB 中構建了一些迷你的 PNG 或者 SVG 圖標動畫時，如何快速確定動畫的延時、間隔、速度關系？反復調整和預覽著實令工程師頭疼。所以這個網站著力解決關鍵幀百分比的快速計算問題▼

http://waitanimate.wstone.io/#!/

FLIP

動畫絕對值計算器。通過對動畫的第一幀和最后一幀截取，測算有關寬、高、左邊距、頂邊距等運動絕對參數▼

https://github.com/GoogleChrome/flipjs

Starability.css

評星系統交互模板。如果你的 HTML5 開發牽涉到評星功能，這個 CSS 組件庫就可以幫上忙了▼

http://blog.lunarlogic.io/starability/

Animsition

過渡動畫庫。目前預存了 58 種過渡動畫，各種 Fade 各種 Rotate 各種 Flip 各種 Zoom，可以讓過渡動畫像 AE 過渡插件一樣便捷載入▼

http://git.blivesta.com/animsition/

iTyped

打字動畫。不需要依賴 jQuery 的打字機效果動畫，可以調節速度和大小的小巧工具▼

https://github.com/luisvinicius167/ityped

Mojs

CSS 動效庫。這是一個正在不斷開發完善的 庫，雖然目前還未開放路徑、彈性等控件，但是它的 CSS 形狀庫已經非常令人驚喜▼

http://mojs.io/

SmoothState.js

加載優化。對于首頁的啟動、回跳進行加載動畫優化，這對移動端 H5 營銷來說尤其重要▼

https://github.com/miguel-perez/smoothState.js

CountUp

計數器模板。一個簡潔的計數器跳動 js 組件，可以用于在 WEB 完成諸如訪問量、分數展示等和數字有關的計數動畫▼

http://inorganik.github.io/countUp.js/

Anime

CSS/JS 動畫分享庫。像一個在線小商城，有很多開發者自己上傳的千奇百怪的 CSS 或者 JS 動畫可以參考和引用▼

http://animejs.com/

Ember Burger Menu

漢堡式菜單樣式生成器。越來越多的站點在自適時采用漢堡式折疊菜單，而這個網站就可以快速更改這種菜單的具體屬性，并引用到你自己的項目中去▼

https://offirgolan.github.io/ember-burger-menu/

HTML5 Maker

HTML5 動畫制作器。這個網站的性質和《》中提到的差不多，適合開發者快速生成一些原型作品▼

http://html5maker.com/

HYPE3

專業級本地 HTML5 設計軟件。很早以前就向大家推薦過，基于平行時間線邏輯的 HTML5 可視化設計開發平臺，你甚至可以用它做一個脫機的交互演示文稿▼

http://tumult.com/hype/

Google Web Designer

以視覺設計為核心的代碼可擴展工具。用來做布局和設備終端適配測試比較方便，界面很有 AE 的風格▼

https://www.google.com/webdesigner/

Blysk

HTML5 動畫制作器。界面很古板，有點像十年前的一些 FLASH 制作器，所以你甚至可以在上面考慮試試 FLASH 風的火柴人漫畫，當然用 HTML5 手法實現▼

http://bly.sk/

Animatron

HTML5 視頻編輯平臺。<video> 作為 HTML5 的重要特性，很多開發者卻仍然搞不清它的發布形式和加載策略，那么在 Animatron 上你可以快速編輯 HTML5 環境下的視頻，利用它的自帶動畫素材庫完成有趣的扁平風格卡通動效組件或者視頻▼

https://www.animatron.com/

Interaction Plus

交互設計 JS 插件。你可以在 envato 上搜索到這款付費插件，提供了不少浮窗、按鈕等素材。

Choreographer.js

CSS 動效庫。試著在頁面打開后滾動鼠標滾輪，你會發現有趣的事情正在發生，它就是一個收集了大量趣味 CSS 動效庫的網站▼

https://christinecha.github.io/choreographer-js/

Kute.js

JS 動效庫。內容豐富，首頁的幾個演示就非常嘆為觀止，也是 HTML5 圈的良心分享網站▼

http://thednp.github.io/kute.js/

來源：?http://www.sohu.com/a/150155227_678107

轉載于:https://www.cnblogs.com/ChenChunChang/p/8268780.html

總結

以上是生活随笔為你收集整理的20个专业H5(HTML5)动画工具推荐的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。