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

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

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

掌握 CSS 動畫的核心概念！ 從簡單的淡入淡出到複雜的動畫序列，完整教學讓你輕鬆創建流暢的網頁動畫效果。

動畫由兩個元件組成：描述 CSS 動畫的樣式和一組關鍵幀，這些關鍵幀指示動畫樣式的開始和結束狀態，以及可能的中間路徑點。

隨著瀏覽器對於 CSS 的支援度提升，現在已經可以透過 CSS 做出許多酷炫的「動畫」效果，這篇教學會先從 CSS 的 @keyframes 定義動畫影格，逐一介紹 CSS animation 各個樣式屬性，例如 animation-name、animation-duration、animation-delay、animation-timing-function、animation-direction...等 ...

什麼是 CSS 動畫？ 動畫讓元素從一種樣式逐漸變為另一種樣式。 您可以根據需要多次更改任意數量的 CSS 屬性。 要使用 CSS 動畫，您必須首先為動畫指定一些關鍵幀。 關鍵幀包含元素在特定時間將具有的樣式。

動畫是突顯互動元素的好方法，可為設計增添趣味。 本單元將說明如何使用 CSS 新增及控制動畫效果。