🎬 CSS 動畫關鍵幀建立器
幾秒內設計 CSS 關鍵幀動畫 — 在每個停頓點設定 transform 和 opacity，預覽即時動畫，並複製可直接貼上的 @keyframes 程式碼。無需安裝，無需註冊，完全在瀏覽器中運行。
隱私優先設計. 此工具完全在您的瀏覽器中運行 — 您輸入的內容不會上傳或儲存，而且它可以在離線狀態下使用。
關於
CSS 關鍵幀生成器讓您無需手動編寫一行 CSS 程式碼，即可建立 @keyframes 動畫。您可以在三個關鍵點（0%、50% 和 100%）定義轉換屬性 — 位移（X 和 Y）、縮放和旋轉 — 以及透明度。動畫持續時間、時間函數（ease、linear、ease-in、ease-out、ease-in-out 或自定義 cubic-bezier）以及重複次數（有限或無限）都可以在面板中進行設定。即時動畫預覽會即時更新，讓您可以調整數值，直到動作感覺恰到好處。準備好後，點選複製，完整的 @keyframes 區塊 — 包括動畫簡寫 — 將被複製到您的剪貼簿，準備貼到您的樣式表中。所有操作都在瀏覽器中進行，無需上傳任何文件，也無需傳送任何資料。
如何使用
- 設定轉換值 — 轉換 X/Y、縮放和旋轉 — 以及 0% 停止點的透明度（動畫的起始點）
- 調整 50% 停止點值以定義運動的中點，或保留預設值以創建簡單的兩狀態過渡。
- 設定 100% 停止點值以定義結束狀態，然後配置持續時間（以秒為單位）、時間函數和重複次數。
- 觀看即時預覽並即時更新，微調任何值，直到動畫看起來完全正確。
- 點選「複製 CSS」以將完整的 @keyframes 區塊和 animation 屬性複製到剪貼簿，然後直接粘貼到您的樣式表中。
常見問題
- 我可以動畫哪些轉換屬性？
- 您可以動畫 translateX、translateY、scale 和 rotate，以及 opacity。每個屬性在 0%、50% 和 100% 的關鍵幀停止點上都是獨立設定的。
- 有哪些時間函數可用？
- 構建器包含 ease、linear、ease-in、ease-out 和 ease-in-out 的預設選項，以及自定義 cubic-bezier 選項，讓您可以創建獨特的加速曲線。
- 我可以讓動畫無限循環嗎？
- 可以。將重複次數設為 Infinite，生成的 CSS 將使用 animation-iteration-count: infinite，使動畫持續無限循環。
- 我需要了解 CSS 才能使用這個工具嗎？
- 不需要。構建器完全視覺化 — 只需移動滑塊並從下拉選單中選擇值。CSS 會自動為您生成，並準備複製到任何專案中。
- 生成的 CSS 是否與所有現代瀏覽器兼容？
- 是的。輸出使用標準的 @keyframes 和 animation 簡寫屬性，這些在所有現代瀏覽器（包括 Chrome、Firefox、Safari 和 Edge）中都受支援，且不需要任何廠商前綴。
- 此工具會上傳我的資料嗎？
- 不會。所有運作都在您的瀏覽器中進行，因此您的資料永遠不會離開您的設備 — 頁面載入後，它甚至可以在離線狀態下使用。