在前幾天我們一直在聊排版和 RWD，今天來點不一樣的，看看怎麼用 CSS 動畫 讓網頁更生動。好的動畫不只是好看而已，它可以幫助使用者理解網頁的變化，例如按鈕被點擊後有回饋，或是區塊滑入畫面時更自然，不會突兀。

過渡效果（Transition）

Transition 是最簡單的動畫，常用在滑鼠 hover 或狀態切換。
設定某些屬性（像顏色、大小、位置）在變化時平滑過渡，就能產生自然的動畫效果。

應用示例

按鈕滑鼠移入時，背景顏色慢慢變深

區塊縮放或位移，避免突兀跳動

動畫效果（Animation）

Animation 適合更複雜或循環的動作，利用 @keyframes 定義動畫的起點、過程、終點。
可以用來做元素淡入、滑入、旋轉、彈跳等效果，也可以設定重複循環。
**
應用示例**

元素進入頁面時淡入

小圖示或按鈕做循環彈跳或擺動

滑動提示或通知欄顯示時的動畫

小技巧

動畫不宜太多，避免干擾使用者注意力

使用 ease-in 或 ease-out 讓動畫更自然

過渡（Transition）適合互動效果，動畫（Animation）適合進場或循環效果