翻譯 | web前端開發
動畫可以為你的網站提供比你想象更多的效果與功能。良好的動畫效果，可以提升使用者體驗，同時還可以發掘更多潛在客戶。
今天這篇文章裡，我将和大家分享21個網站動畫工具，可以提升你的網站設計水準。
1、Ola
Ola是Javascript UI庫類别中的技術堆棧工具。衆所周知，它是用于内插數字的平滑動畫庫。它仍然是一個受歡迎的開源項目，擁有超過180萬個GitHub star和38個fork。
2. ITyped
ITyped是一個簡單的庫，用于為Web應用程式建立輸入打字動畫。該庫非常易于使用。最吸引人的方面是該庫沒有依賴項，大小隻有2KB。它也沒有在内部使用JQuery。
3、Choreographer.js
Choreographer是一個JavaScript庫，可以幫助開發人員建立精美的動畫。滾動或滑鼠移動可以啟動這些動畫。它還能處理複雜的CSS動畫，為你完成繁重的工作，并允許你使用自定義功能。
4、SmoothState.js
SmoothState.js提供了用于在導航期間編排元素如何進入和退出頁面的鈎子。它使用動畫播放的時間從伺服器擷取内容，并使用AJAX将其注入頁面。支援CSS動畫，以及JS動畫庫（例如velocity.js）。
5、Kute.js
KUTE.js是功能齊全的動畫引擎，可用于建立具有無法使用CSS3過渡或其他動畫引擎進行動畫處理的屬性或元素的複雜動畫。它不支援舊版浏覽器，但是對于任何浏覽器或媒體資源，它都具有廣泛的工具和實用程式集。
6、AnimateMate
AnimateMate使你可以直接從Sketch中導出簡單的動畫。它具有多種功能，例如允許你建立關鍵幀，對其進行編輯，使用緩動，偏移動畫等。這些功能絕對可以滿足你可能需要的任何動畫需求。
7、Anime
動漫是一個簡單而強大的JavaScript動畫庫，它既靈活又具有輕量級的API。CSS，Individual Transforms，SVG，DOM屬性和JavaScript對象均受支援。
8、SimpleParallax
SimpleParallax是一個小的JavaScript庫，允許你向任何圖像添加動畫視差。像大多數其他視差庫中一樣，由于視差效果直接應用于圖像辨別符，是以無需使用背景圖像。視差效果可以在實時網站上使用，而不會導緻其中斷。你可以根據需要向圖像标簽/ srcset圖像添加視差。
9、Granim.js
Granim.js是一個輕量級的無依賴的JavaScript庫，可幫助使用JavaScript中建立的Granim執行個體在畫布元素上建立可配置的，基于互動式漸變的動畫。
10、Ember Burger Menu
Ember Burger Menu是一個基于CSS過渡的非畫布側邊欄元件，具有多種動畫和樣式。
它具有以下功能：設定畫布外菜單，還支援具有可變門檻值的滑動手勢，能夠混合和比對許多菜單和菜單項動畫的功能，可以使你輕松建立自己的動畫。
11、Starability.css
Starability.css它是一種有友好動畫的使用者評分表。它的等級是用純HTML和CSS編寫的，并且可以通過鍵盤通路，是以即使螢幕閱讀器也可以使用它們。将這項動畫技術引人到你的網站中，進而使你的網站增加不少活力。
12、 Ramjet
Ramjet.js将一個DOM（文檔對象模型）從一種狀态變形為另一種狀态。它給人的印象是兩個元素，可以從一個轉換到另一個，而無需手動動畫。它也可以用在圖像上，非常好使用。
13、 JustGage
JustGage是一個友善的Javascript插件，它可以使用SVG建立漂亮的和幹淨的量規并為其設定動畫。使用Raphael庫進行矢量繪圖的結果是，它與分辨率無關并且可以自我調整。
14、Mo.js
Mo.js是基于Web的JavaScript運動庫。它具有動作的聲明性文法以及建立動畫元素的能力。Mo.js允許你建立的Shapes和其他對象可能會簡化你的工作流程，具體取決于你要設定動畫的對象。
15、AOS
AOS背後的概念很簡單：它根據你提供的設定跟蹤所有元素及其位置。然後添加或删除aos-animate類。當然，實際上，它并不總是那麼簡單，但是AOS背後的概念卻很簡單。CSS負責動畫的各個方面。
16、Animate
Animate允許你從頭開始制作循環動畫，并在循環之間具有自定義的延遲。它确定了在自定義動畫關鍵幀中放置多少個停頓，以擷取兩次循環之間所需的确切停頓持續時間。還支援所有CSS3動畫功能，包括旋轉和變換。
17、Html5tooltips
html5tooltips.js是一個功能強大的JavaScript庫，它将幹淨的CSS3動畫工具提示附加到包含任何HTML内容的特定DOM元素。
18、 Flip.js
FLIP是一種動畫技術，它通過拍攝兩張照片來實作此目的，即元素的第一個位置（F）和元素的最後一個位置（L）（L）。然後，它使用一個轉換來反轉（I）元素的更改，給人的印象是該元素仍處于First位置。
19、Sonic.js
SonicJs是一個現代的開源内容管理系統和Web應用程式架構。它是100％基于Javascript的，并利用IBM的Loopback ORM對最流行的資料庫系統進行資料通路。
20、 MixItUp
MixItUp是一個很棒的插件，用于組織任何類型的分類内容，包括部落格，畫廊和作品集。MixItUp還可以用于建立視覺上吸引人的使用者界面和資料可視化。
21、SVG.js
SVG.js沒有依賴性，其目标是盡可能小，同時覆寫幾乎整個SVG規範。它快速，易于閱讀，并且文法整潔。它們還具有與元素的綁定事件，對不透明蒙版和剪切路徑的完全支援以及各種有用的插件。
使用網絡動畫的主要目的是使您的網站對通路者而言更具響應性和直覺性。動畫可以是一個強大的工具，可以幫助您的聽衆實作目标，并在設計周到的前提下與您的内容保持互動。
本文完〜