CSS Keyframes 動畫產生器：時間軸與減少動態
建立最多八個 opacity 與 2D transform 影格，操作靜態時間軸、明確播放原生動畫，提供減少動態控制及一致 CSS。
正在啟用本機工具…
受控 2D 影格
2–8 個影格，必須有 0% 與 100%；百分比須唯一，輸出自動排序。opacity 0–1；X −200–200 px；Y −100–100 px；旋轉 −360–360 deg；縮放 0.1–3。僅數值編輯，不接受任意 CSS。名稱限 ASCII 字母或底線開頭，最多 64 字元。輸入僅留本機記憶體。
時間軸與動態預覽
預覽不會自動播放。載入範例後建立動畫，再明確播放。
編輯影格或載入範例，再建立。
如何使用這個工具
載入範例或編輯影格，建立後檢查靜態時間軸；明確播放、暫停或重啟，尊重減少動態並檢查匯出的 media rule。
不適合用在什麼情況
不自動播放。靜態時間軸是無延遲單次正向，與設定的播放不同；不認證實際元件的無障礙或效能。
閱讀實作指南 →