CSS Keyframes 動畫設計指南
@keyframes 以百分比描述動畫時間軸上的狀態，animation 則控制播放時間、延遲、重複、方向、填滿模式與速度曲線。短暫的介面回饋通常使用 150–400ms，頁面元素進場可落在 400–800ms；持續時間過長會讓操作顯得遲鈍。
優先動畫化 transform 與 opacity，通常能避免重新排版並獲得較順暢的效能。對暈動敏感的使用者，請使用 @media (prefers-reduced-motion: reduce) 關閉非必要位移。
使用方法
- 選擇符合情境的動畫類型。
- 調整 Duration、Delay、Direction、Fill Mode 與 Timing Function。
- 播放確認節奏，複製產生的 class 與 keyframes。
常見問題
animation 和 transition 有什麼差別？
animation 能描述多段影格並自動循環；transition 適合在元素狀態改變時從起點過渡到終點。
如何設定無限循環？
將 Iteration Count 選為無限，程式碼會輸出
infinite。Fill Mode 該怎麼選？
forwards 保留最後影格，backwards 在延遲期間套用第一影格，both 同時包含兩者。
暫停按鈕如何運作？
工具使用 animation-play-state 切換 paused 與 running，不會重建動畫。
怎麼減少動畫造成的不適？
降低大幅位移與旋轉、避免閃爍，並為 prefers-reduced-motion 提供靜態替代。