八個解決你80%需求的CSS動畫庫

八個解決你80%需求的CSS動畫庫

點選開啟影片講解

在學習和工作的過程中，我們總免不了要寫各種各樣的css動畫，給某個部分新增動畫效果，如果覺得自己寫的動畫效果單一乏味，不妨試試這8個CSS動畫庫，值得收藏使用。

一、hover.css

開箱即用的滑鼠懸停動畫，支援的動畫型別有：

• 2D Transitions （2D過度）
• Background Transitions （背景過度）
• Icons Transitions （圖示過度）
• Border Transitions （邊框過度）
• Shadow and Glow Transitions（陰影過度）
• Speech Bubbles （氣泡效果過度）
• Curls （卷積過度）

二、Animate.css

一款跨瀏覽器的簡單便捷的CSS動畫庫
提供了非常豐富的動畫效果，目前很多開源專案都用到了它
H5-Dooring和DooringX也內建了很多它的動畫效果

三、Magic.css
gitLab

動畫效果非常震撼，如果大家想做一個比較炫酷的網站，可以參考使用這款css庫

四、CSShake.css

一個能夠提供震動和晃動Dom元素的CSS庫
在移動端模仿手機震動，QQ視窗震動

五、hint.css

一個用純 css 和 html 實現的提示庫. 體積超級小, 對於一些位置固定的提示場景, 非常有用, 
不用擔心包體積過大的煩惱~

六、kite.css

一個相容性極好且靈活的佈局 css 庫. 使用inline-block，基於 OOCSS 和 MindBEMding, 可以
幫助我們快速構建元件.

七、Three Dots

Three Dots是一組CSS載入動畫，它由三個點組成，而這些點僅由單個元素組成。

用法

只需建立一個div元素，並新增動畫的名稱

<div class="dot-elastic"></div>

八、Angrytools

如果使用不同的生成器，Angrytools實際上是一個集合，其中還包括CSS動畫生成器。

它可能不像Animista那麼複雜，這個站點還提供了一些自定義動畫的特性，比如動畫的持續時間
或延遲。

還可以在其展示時間軸上新增自定義的keyframes，然後可以直接在其中編寫程式碼。 另外，也可以
編輯現有的。

當完成的時候，可以得到完整的動畫程式碼，也可以下載它。

若對您有幫助，請點選跳轉到B站一鍵三連哦！感謝支援！