【總結】前端必須收藏的CSS3動效庫！！！

 

如今的網站和App的設計中愈來愈重視用戶體驗，而優秀的動效則能使你的應用更具交互性，從而吸引更多用戶的使用。

若是你對CSS3中定義動效還不熟練，或但願採用更加簡單直接的方式在你的應用中引入動效的話，你能夠參考並使用下面的優秀動效庫（工具）。

 

---

 

 Animate.css

       很是適合那些對CSS3動畫效果不熟悉，但又但願給本身所作的網站或基於H5的APP引入動效的朋友。由於，你只須要給須要實現動效的元素添加上Animate.css中預約義的那些動效名稱就能夠了。好比常見的：bounce，flash，fadeIn，fadeOut等等，加起來有75種不一樣的動效，徹底可以知足你的基本須要了。

 

       固然對於這個庫也有一些使用注意事項，好比你最好在給元素添加動效樣式完成動效後，立刻將這個動效樣式去掉。另外，對於動效的時長，振動幅度等，你也須要作一些調整。

Animate.css已經很貼心得提供了詳細的文檔告訴你應該如何作這些調整。

 

---

 

 

 Bounce.js

       Bounce.js是一個可以生成CSS3動效的小工具，它是用JavaScript編寫的，提供了一個Web界面，你能夠添加一個組件而後就能夠選擇包括Scale，Translate，Rotate，Skew這些動效類型，而後分別設置它們的參數，當達到你想要的效果後，你能夠將這個動效以CSS的方式導出，這樣你就能夠將它應用到你的應用中了。

 

---

 

CSS3 Animation

       CSS3 Animation是一個很是簡單易用的動效工具，你能夠在它提供的簡單圖形界面裏，經過拖拽一些進度條來控制你的動效，生成的CSS代碼會自動顯示在下面的一個文本框裏，你能夠拷貝粘貼到你的應用中直接使用。

 

---

 

CSS Animate

       若是你以爲上面的工具還沒法作出你想要的動效，那麼能夠看看CSS Animate這個工具。它能讓你設置更多的動效參數，好比你能夠同時設置動效起始和終止狀態的座標，大小，以及透明度，這樣你就可以作出更加複雜的動效來。

 

---

 

Magic Animations

       Magic Animations與Animate.css十分相似，也是一個預約義了一系列動效的CSS庫。但與Animate.css的最大區別多是，它定義的那些動效更炫也更酷一些，若是你的網站也很新潮，那能夠考慮使用這個CSS動效庫。

 

---

 

Hover.css

    Hover.css提供了大量的Hover效果，包括2D變換，圖標變換，背景變換等等。並且幾乎能夠應用於全部元素，包括連接，按鈕，logo，SVG甚至圖片等等。

 

 

---

 

 

Odometer

    Odometer是用來給數字做動效的，好比經過它你能夠很好地呈現網站人數的增長，倒計時等與數字相關的動畫效果。

 

---

 

 Sanbbt.js

       它很是小巧只有5K，因此能夠被用在移動應用中。並且它也支持鏈式語法，你能夠很方便地寫出複雜的動效組合。

 

---

 

Single Element CSS Spinners

       咱們常常會須要一些動效來表達系統處於加載或處理數據的過程當中。Single Element CSS Spinners這個在GitHub上的項目，提供了一組很是漂亮的可用於加載的CSS3動效。