10個免費好用功能強大的網頁動畫效果庫

時間 2019-12-08

標籤免費好用功能強大網頁動畫效果欄目 HTML 简体版

原文原文鏈接

動效設計是2018年的熱門趨勢之一。若是你仔細找找的話，會發現許多有趣的用來構建UI動效的工具，而這些素材和工具正在成爲愈來愈多設計項目中不可或缺的催化劑。今天～小編爲你推薦10個靠譜的開源免費網頁動效庫，幫你的設計加速～^_^前端

1. GSAP

GSAP 可能目前最炫酷的免費動畫庫之一了。它運行於純粹的 JavaScript 之上，是目前最強健的動畫資源庫之一。它符合 HTML5 的規範，而且和幾乎全部的現代瀏覽器都能良好的協同，能夠SVG、畫布元素甚至 jQuery 對象良好地協同，諸如 EaselJS 這樣的庫也能夠和 GSAP 聯動。若是你須要一個強大的網頁動畫庫的話，GSAP絕對值得一看。git

2. Anime.js

當我第一次看到Anime.js 這個庫的時候，完全被它迷住了。這玩意很是強大，功能並不只限於UI/UX動畫的製做。你能夠藉助 Anime.js 將動畫加持在LOGO、按鈕、圖像等各類各樣的元素上。它支持各類常見的觸發機制，好比點擊、懸停、滑動，你能夠藉助它定義一系列的動畫。github

3. Wicked CSS

Wicked CSS 是一個相對更新一些的動效庫，它主要是基於CSS代碼的。Wicked CSS 藉助 CSS3的特性，提供了一些堪稱難以想象的特效。在它的首頁上，你會看到許多實時演示，你能夠經過這些範例學會如何讓對象進行旋轉、翻轉、劃入等不一樣類型的動畫效果。有些動畫效果很簡單，可是它一樣能夠實現許多複雜而有趣的動畫，這也是Wicked CSS 有意思的地方。面試

4. Animate CSS

也許 Animate.CSS 纔是你想要的最終的網頁動效解決方案。這個開源代碼庫是幾年前發佈的，可是時至今日它依然是最有用的動效代碼庫。開發者 Daniel Eden 是這個項目的發起者，他以最簡化的方式在網頁上發佈自定義的 CSS3動畫，經過半年多時間的積累，構建出了一個完整的動畫庫，而且幾乎能夠應對絕大多數的項目。項目主頁上有大量的演示，GitHub上還有許多很棒的文檔供你參考。正則表達式

5. Tuesday

Tuesday 所提供的動畫最使人着迷的地方，是其中動畫都很是的簡單、有用。藉助這個庫，你能夠有效的控制頁面中元素的出現和消失的方式。這些動畫並非那種炫酷屌炸天的，相反它們是很是微妙的，真正從美學和用戶體驗的層面提高整個頁面的設計。Tuesday 是純粹的CSS代碼，幾乎能夠和任何網站無縫地銜接起來。npm

6. CSShake

坦率的講，我歷來沒有見過比 CSShake 更加奇怪或者有趣的 CSS庫了。它所帶來的動畫效果很是的瘋狂、獨特，它並不必定適合每一個網站。換句話來講，就是 CSShake 所提供的動效實際上是獨一無二的，這也是爲何它會存在於這個列表當中。瀏覽器

7. Mo.js

經過細節仔細對比了諸多的 JavaScript 庫以後，不得不說 Mo.js 是最好的動效庫之一。Mo.JS 很是的龐大，並且它是徹底爲UI/UX設計而生的動效庫。關於 Mo.js 有大量的文檔和教程，它的代碼操做並不複雜，瞭解以後就能夠輕鬆掌握。它有着許多使人驚歎的功能，不管是導航欄，仍是LOGO或者其餘複雜的元素，它都可以將他們合理的動畫化。微信

8. Animate Plus

Animate Plus 是一個輕量級的動效庫，它只有2KB，可是它有着自定義 JavaScript 動畫所需的所有基本功能。使用npm你能夠輕鬆地將 Animate Plus 安裝好，你只須要按照Github 上的代碼進行設置便可。其中所包含的絕大多數都是基本的Demo，因此你不會碰到複雜的問題，不過經過Github，你會找到全部你須要的選項和方法。ssh

只須要點擊幾下，你就能夠藉助Bounce.js創造出強大的CSS3 和 JS動畫了。在主頁上，你會找到一個模塊化的自定義動畫生成器，經過這種方式，Bounce.js 會幫你將特定的功能添加到你的頁面上，無需添加額外的代碼。和其餘的同類工具不一樣的地方在於，它不只僅是一個庫，而是有這用戶能夠直接操做的實際功能，它帶有一個完整的網頁構建器。Bounce.js 是爲數很少的能夠直接在瀏覽器中進行設計和設置的動畫庫之一。

10. Magic

Magic 多是最有趣的動效庫之一。它集合了許多基於CSS3的動畫效果，而且帶有許多在別的地方根本找不到的自定義樣式。這是一個很是大的CSS3代碼庫合集，你也會在這裏學會許多巧妙的動畫設計技巧。本位做者：Geek豪哥，原文連接：http://igeekbar.com/igeekbar/post/983.htm。轉載請註明出處。