前端經常使用動畫庫

在開發中，好的動畫效果會讓軟件使用起來更有吸引力，震撼力。因此咱們常常會將一些經常使用的代碼塊、功能塊進行封裝，爲的是更好的複用。

下面這些是我在工做中積累的一些經常使用的開源動畫庫，我只是簡單羅列出來，詳細的介紹和用法 能夠去官網或者github。根據本身具體的需求選擇合適的。歡迎留言討論~~

另外不要重複造輪子，把精力放在業務邏輯上！

Animate.css

目前最通用的動畫庫，是一個CSS3動畫庫，內置了不少典型的css3動畫，兼容性好使用方便。

 

Anime.js

一個強大的、輕量級的用來製做動畫的javascript庫。它適用於任何CSS屬性，單個CSS轉換，SVG或任何DOM屬性以及JavaScript對象。

 

Hover.css

CSS hover 懸停效果，能夠應用於連接、按鈕、圖片等等，提供CSS，Sass和LESS。

wow.js

滾動展現動畫，依賴 animate.css，因此它支持 animate.css 多達 60 多種的動畫效果

 

scrollReveal.js

和 WOW.js 同樣，scrollReveal.js 也是一款頁面滾動顯示動畫的 JavaScript，能讓頁面更加有趣，更吸引用戶眼球。不一樣的是 WOW.js 的動畫只播放一次，而 scrollReveal.js 的動畫能夠播放一次或無限次。WOW.js 依賴 animate.css，而 scrollReveal.js 不依賴其餘任何文件。

 

Magic.css

一款獨特的CSS3動畫特效包，你能夠自由地使用在您的網頁中。只需簡單的在頁面上引入 CSS 文件: magic.css 或者壓縮版本 magic.min.css 就可使用了。

 

Waves

點擊水波紋動畫效果

 

move.js

Move.js是一個小型的JavaScript庫，經過JS來控制一系列的CSS動畫順序執行，使CSS3動畫變得很是簡單和優雅。

Velocity.js

Velocity 是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它能和 jQuery 完美協做，並和$.animate()有相同的 API， 但它不依賴 jQuery，可單獨使用。 Velocity 不只包含了 $.animate() 的所有功能， 還擁有：顏色動畫、轉換動畫(transforms)、循環、 緩動、SVG 動畫、和 滾動動畫 等特點功能。