專題 C4：CSS 與設計
CSS 動畫與過渡完整指南
動畫應該強化狀態變化，而不是打擾內容閱讀。把 transition、keyframes 與 easing 收斂成系統，介面會更穩定。
先分清楚過渡與關鍵影格
過渡更適合 hover、focus、展開收合這類 A 到 B 的狀態切換，因為可預期、可重用，也較容易控制節奏。
關鍵影格更適合 loader、引導動效與敘事式移動，但循環動畫要節制，也要提供 reduced-motion 回退。
團隊應統一的動效規則
- 優先動畫 `transform` 與 `opacity`，避免造成版面抖動。
- 只保留少量 easing token，例如進場、退場、強調三類。
- 把時長與 easing 納入設計系統，避免各元件自行亂寫 cubic-bezier。
實用輸入/輸出範例
輸入
元件：切換開關 目標：切換時有明確但不拖泥帶水的回饋
輸出
transform 180ms cubic-bezier(.2,.8,.2,1) color 140ms ease-out