AnyTools
🎬

CSS 動畫產生器

帶關鍵影格和緩動函式的視覺化 CSS 動畫編輯器

動畫設定

動畫名稱
持續時間 (1s)
延遲 (0s)
時間函式
ease
方向
normal
迭代次數
1

預覽

產生的 CSS

❓什麼是 CSS 動畫

CSS 動畫使元素能夠在不使用 JavaScript 的情況下從一種樣式逐漸變化到另一種樣式。@keyframes 規則定義動畫序列，其中包含稱為關鍵影格的中間步驟，在動畫持續時間的不同百分比（0%、50%、100%）指定 CSS 屬性。動畫屬性控制時間（持續時間、延遲）、重複（迭代計數）、方向（正常、反向、交替）和緩動（時間函式）。CSS 轉場提供由屬性變更觸發的更簡單的基於狀態的動畫。動畫改善使用者體驗，提供視覺回饋，引導注意力，並建立引人入勝的介面，同時透過硬體加速實現流暢的效能。

✨功能特點

🎬

視覺化關鍵影格編輯器

使用視覺化時間軸介面建立和編輯 @keyframes 動畫。在任何百分比新增/刪除關鍵影格，為每個步驟設定 CSS 屬性（變換、opacity、color），支援拖放時間軸
⏱️

時間控制

配置動畫持續時間、延遲、迭代次數（無限或特定）、方向（正常/反向/交替）和填充模式（向前/向後/雙向），即時預覽更新
📐

緩動函式

從內建緩動函式（ease、linear、ease-in/out）中選擇或使用視覺化編輯器建立自訂三次貝茲曲線。預覽緩動曲線並比較不同的時間函式
🎨

動畫庫

預先建立的動畫預設：淡入/淡出、滑動（左/右/上/下）、彈跳、旋轉、縮放、脈衝、抖動、翻轉。自訂預設或用作複雜動畫的起點

📋使用指南

1️⃣
選擇類型
在關鍵影格動畫或轉場之間選擇，或使用庫中的預設
2️⃣
配置動畫
設定持續時間、延遲、緩動函式，並新增帶 CSS 屬性的關鍵影格
3️⃣
預覽動畫
檢視動畫效果的即時預覽並即時調整參數
4️⃣
匯出 CSS
複製產生的 CSS 程式碼，包括 @keyframes 規則和動畫屬性

📚技術介紹

🎭Keyframes 規則

@keyframes 透過在各個點指定 CSS 樣式來定義動畫序列。語法：@keyframes 名稱 { 0% { property: 數值; } 50% { property: value2; } 100% { property: value3; } }。百分比表示時間軸位置（0% 是開始，100% 是結束）。替代關鍵字：來自 (0%) 和 to (100%)。多個屬性可以同時變更。關鍵影格由 animation-名稱 屬性參考。較舊的瀏覽器可能需要瀏覽器字首 (@-webkit-keyframes)。關鍵影格可在多個元素間重用。

⚙️動畫屬性

animation 是八個子屬性的簡寫：animation-名稱（關鍵影格名稱）、animation-duration（時間長度）、animation-timing-函式（緩動）、animation-delay（開始延遲）、animation-iteration-count（重複次數）、animation-direction（播放方向）、animation-填滿-mode（前/後狀態）、animation-播放-state（執行/暫停）。簡寫語法：animation: 名稱 duration timing-函式 delay iteration-count direction 填滿-mode 播放-state。用逗號分隔的多個動畫同時套用。屬性可以單獨設定以進行精細控制。

📊時間函式

時間函式使用數學曲線控制動畫速度。內建關鍵字：ease（慢開始/結束，快中間）、linear（恆定速度）、ease-in（加速）、ease-out（減速）、ease-in-out（兩者）。cubic-bezier(x1,y1,x2,y2) 使用控制點建立自訂曲線。值：x 在 0-1 之間，y 可以超出 0-1 以實現彈跳效果。cubic-bezier.com 等工具視覺化曲線。步驟(n, 開始|end) 建立步進動畫。硬體加速套用於 變換 和 opacity 以實現 60fps 效能。

🔄效能最佳化

對於流暢的 60fps 動畫，優先動畫化 變換（translate、縮放、旋轉）和 opacity，因為它們觸發 GPU 合成而不需要重新計算版面配置。避免動畫化 width、height、頂部、向左、margin（導致重排）。使用 will-change: 變換 提示瀏覽器即將進行的動畫。限制並行動畫和關鍵影格複雜性。使用 CSS 包含（contain: layout style）隔離動畫範圍。JavaScript 觸發的動畫使用 requestAnimationFrame()。減少運動媒體查詢尊重使用者無障礙偏好：@media (prefers-reduced-motion) 停用或簡化動畫。
❓

常見問題

❓

這個工具有什麼用途？

這個工具可以幫助您視覺化建立 CSS 動畫，無需手動編寫程式碼。您可以產生 @keyframes 動畫，設定時間函式，設定持續時間和延遲，並匯出即用的 CSS 程式碼。非常適合網頁開發者、設計師以及需要為網站新增流暢動畫的使用者。
💬

如何使用這個 CSS 動畫產生器？

只需設定您的動畫設定：選擇動畫名稱，設定持續時間，選擇時間函式（ease、linear、cubic-bezier），設定延遲和迭代次數，並設定方向。工具會產生完整的 CSS 程式碼，包括 @keyframes 規則和動畫屬性。您可以預覽動畫並一鍵複製程式碼。
🔍

這個工具是免費的嗎？

是的，這個 CSS 動畫產生器完全免費。無需註冊、付費或建立帳戶。您可以立即線上使用，沒有任何限制或限制。
💡

我可以在這個工具中自訂關鍵影格嗎？

是的，工具允許您建立自訂 @keyframes 動畫。您可以在不同百分比（0%、50%、100%）定義 CSS 屬性，包括 變換、opacity、color 和其他可動畫屬性。產生的程式碼包括 @keyframes 定義和套用它的動畫屬性。
📚

哪些瀏覽器支援產生的 CSS 動畫？

產生的 CSS 動畫使用所有現代瀏覽器（Chrome、Firefox、Safari、Edge）支援的標準 @keyframes 語法。對於較舊的瀏覽器，您可能需要新增供應商前綴，如 @-webkit-keyframes。工具產生符合 CSS3 動畫規格的標準 CSS。
🎯

如何提高動畫效能？

為了獲得最佳效能，應動畫化 變換 和 opacity 屬性，因為它們會觸發 GPU 加速。避免動畫化版面配置屬性，如 width、height、margin 或 padding。使用 will-change: 變換 來提示瀏覽器。工具產生最佳化的程式碼，但在自訂關鍵影格時應套用這些最佳實務。
✨

我可以在生產環境中使用產生的程式碼嗎？

是的，產生的 CSS 程式碼可以直接用於生產環境。它遵循標準 CSS 動畫語法和最佳實務。只需複製程式碼並貼上到您的樣式表中。您可能需要調整動畫名稱並自訂關鍵影格以符合您的特定設計需求。

🔗相關文件

📖MDN - CSS 動畫-@keyframes 和動畫屬性的完整指南
🎨Cubic-Bezier.com-視覺化三次貝茲緩動函式編輯器
📚Animate.css 函式庫-包含 80+ 動畫的即用 CSS 動畫庫
⚡CSS 動畫效能指南-高效能 CSS 動畫的最佳實務
🎯緩動函式速查表-所有緩動函式類型的視覺化參考

User Comments

0 / 2000
Loading...