【網戰CSS動畫系列 EP04】滑動卷軸產生的動畫效果 Animate on Scroll; Making animations while scrolling using AOS

透過 CSS 動畫，前端開發者可以輕鬆創造出各種生動的效果，令網站更加引人入勝。 在此文章中，我們將深入探討 CSS 動畫的基本概念、最佳實踐、進階技巧以及性能優化。

如果你跟我一樣，不想花太多心思研究 CSS 動畫樣式語法，想用最小的力氣做到老闆客戶使用者口中的「讓文字從下面飛上來，看起來比較炫」、「點到項目時要像彈簧抖一下，加點俏皮感」，有個絕妙好物 - Animate.css，一個開源的純 CSS 動畫特效庫 ...

從網路上的各種來源精心挑選的 20 個最佳 CSS 動畫的集合。 它們中的大多數將產生純 CSS 程式碼，而不需要任何外部程式庫。

動畫由兩個組件組成：一個描述 CSS 動畫的樣式，以及一組指示動畫樣式開始與結束狀態的關鍵影格，其中也可能包含中間的途經點。

CSS動畫其實沒那麼難！ 就像控制電影播放一樣，只要掌握幾個關鍵參數，你也能讓網頁元素跳躍、淡入、旋轉。 這篇用最簡單的方式教你CSS動畫，附上實用範例，立刻就能應用到你的網站上！

anime.js 功能強大的動畫工具，可以和CSS3變數、SVG、DOM 之類的元素互動，製作出高效能且平滑的動畫效果。