CSS 動畫產生器

📖 工具介紹

CSS 動畫產生器是一款面向前端開發者與視覺設計師的免費線上工具，它把過去需要手寫 @keyframes 的繁瑣過程變成了拖動滑桿的直觀操作。你只需要調整水平位移、垂直位移、旋轉角度、縮放比例與結束透明度五個核心屬性，再選擇動畫時間長度與緩動曲線，右側舞台上的彩色小球就會立即依照你的設定播放動畫，下方同步產生可以直接貼到專案樣式表中的標準 CSS 程式碼。無論你是想給按鈕加上浮效果、給圖示做旋轉入場，還是給頁面元素設計淡入淡出的過渡，都可以在幾秒內完成除錯並複製程式碼。工具全程在瀏覽器本機執行，不發出任何網路要求，也不會上傳你的參數；介面支援簡體中文、繁體中文與英文三語，自動跟隨網站主題色，在手機上同樣可以順暢調整。無需註冊、無需安裝，打開即用，是提升互動動效開發效率的實用助手。

✨ 功能特點

• 五維關鍵影格屬性：位移、旋轉、縮放、透明度可獨立調整，組合出豐富的入場與循環動畫
• 即時舞台預覽：每次拖動滑桿，小球都依最新參數播放，所見即所得
• 七種緩動曲線：從 linear、ease 到帶回彈的 cubic-bezier，涵蓋常見動效節奏
• 循環與方向控制：支援無限循環與往返方向，讓首尾銜接更自然
• 標準程式碼輸出：自動產生帶有 from / to 的 @keyframes 與 animation 縮寫屬性
• 一鍵複製範例：內建回彈範例，點擊即可體驗完整動畫並學習程式碼結構

📝 使用方式

1. 拖動左側滑桿，設定動畫結束時的位移、旋轉、縮放與透明度
2. 在時間長度欄輸入動畫持續秒數，從下拉選單選擇合適的緩動曲線
3. 勾選無限循環或選擇正向、往返方向，觀察右側舞台的即時播放效果
4. 點擊產生程式碼按鈕，在程式碼區檢視自動組裝好的 CSS 關鍵影格規則
5. 點擊複製程式碼，把結果貼到你的專案樣式表中即可使用

⚠️ 注意事項

• 時間長度：動畫時間長度必須為大於 0 的數字，非法輸入會回到預設值並提示
• 座標方向：位移支援負值，X 為負向左移動，Y 為負向上移動
• 縮放基準：縮放從 1 開始變化，設為 0 可做出元素消失或出現的淡入效果
• 效能提示：只對 transform 與 opacity 做動畫可避免重排，獲得最流暢的效能
• 本機執行：所有計算與預覽都在瀏覽器完成，不產生網路要求，請放心使用