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）中選擇或使用視覺化編輯器建立自訂三次貝茲曲線。預覽緩動曲線並比較不同的時間函式
🎨
動畫庫
預先建立的動畫預設：淡入/淡出、滑動（左/右/上/下）、彈跳、旋轉、縮放、脈衝、抖動、翻轉。自訂預設或用作複雜動畫的起點
🎯
Use Cases
CODE
Development workflow
Use CSS Animation Generator during implementation to generate, inspect, format, or verify technical assets without switching to heavier project tooling.
REVIEW
Code review and cleanup
CSS Animation Generator helps review copied snippets, generated files, configuration fragments, and implementation details before they are committed or shared.
DOC
Technical documentation
Turn practical examples from CSS Animation Generator into clearer pull requests, runbooks, onboarding notes, and API or SDK documentation.
📋使用指南
選擇類型
在關鍵影格動畫或轉場之間選擇，或使用庫中的預設
配置動畫
設定持續時間、延遲、緩動函式，並新增帶 CSS 屬性的關鍵影格
預覽動畫
檢視動畫效果的即時預覽並即時調整參數
匯出 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 動畫語法和最佳實務。只需複製程式碼並貼上到您的樣式表中。您可能需要調整動畫名稱並自訂關鍵影格以符合您的特定設計需求。
🔗相關文件
User Comments
Loading...