CSS 關鍵影格動畫產生器
重點摘要：CSS 關鍵影格產生器內建 15 種 @keyframes 動畫，例如淡入、由下淡入、滑入、放大進場、脈動、彈跳、搖晃、旋轉、心跳，可調整時間、延遲與播放次數，並自動加上 prefers-reduced-motion 關閉動畫。
選一種動畫、調整參數，複製就能用。已自動加上 prefers-reduced-motion。
常見問題
進場動畫預設時間多長？
本站預設淡入 0.4 秒、由下淡入與滑入 0.5 秒、放大進場 0.4 秒、翻轉與模糊進場 0.6 秒，都可自行調整。
哪些動畫預設會無限循環？
脈動、彈跳、旋轉（載入中）、漂浮、心跳與打字機游標閃爍預設為無限循環，其餘進場類與搖晃（錯誤提示）預設只播 1 次。
表單錯誤提示適合用哪種動畫？
可用 shake 搖晃動畫：預設 0.4 秒，元素左右各位移 8px，適合提示輸入錯誤；要避免過度頻繁觸發。
產生的程式碼包含哪些部分？
包含 @keyframes 定義、套用動畫的 class（時間、easing、延遲、次數與 both 填充模式），以及 prefers-reduced-motion: reduce 時把 animation 設為 none 的規則。