CSS Sprite 動畫產生器
從多張圖片或 Sprite Sheet
自動產生 CSS 動畫程式碼
📏 網格設定
⚙️ 動畫設定
🎞️ 影格順序
拖曳以重新排序關於 CSS Sprite 動畫產生器
CSS Sprite 動畫產生器是一個免費的線上工具，能從多張影格圖片或現有的 Sprite Sheet 中，利用 animation 屬性與 steps() 函數自動產生 CSS 動畫程式碼。
與 GIF 動畫不同，CSS Sprites 提供高品質且不失真的圖片。它們允許您直接透過 CSS 靈活地控制播放速度、方向與重複次數。此外，它們還能完美地保留半透明區域 (Alpha 色版)。
從圖片載入到合併以及 CSS 程式碼的產生，所有步驟都完全在您的瀏覽器內部處理。您的圖片絕不會被上傳到伺服器，確保快速且安全的體驗。
如何製作 CSS Sprite 動畫
上傳圖片
選擇已經合併的 Sprite Sheet，或上傳多張影格圖片以將它們合併為一張。
調整動畫
在查看即時預覽的同時，設定欄數、列數、播放速度 (持續時間) 與播放方向。
取得程式碼與圖片
下載最終的 Sprite Sheet 圖片，並複製產生的 CSS/HTML 程式碼以整合至您的專案中。
CSS 屬性說明
CSS animation + steps() 是如何運作的？
steps() 函數是 CSS animation-timing-function 屬性中使用的值。一般動畫 (例如 ease 或 linear) 會隨時間平滑地補間數值，而 steps() 則會以不連續的步進方式改變數值。
在 Sprite 動畫中，這個屬性被用來立即將 background-position 位移單一影格的寬度，從而創造出類似翻頁書的逐格動畫效果。
| 屬性 | 說明 | 在 Sprites 中的作用 |
|---|---|---|
| animation-timing-function | 動畫的節奏曲線 | 設定 steps(N) 可防止影格之間出現平滑的過渡效果。 |
| background-position | 背景圖片的起始位置 | 在 @keyframes 中修改以將不同的影格移入視圖中。 |
| animation-duration | 完成一個週期所需的時間 | 決定整體的播放速度 (FPS)。 |
動畫名詞解釋
- Sprite Sheet
- 一張包含多張排列成網格的小圖片 (影格) 的大圖片。它可以減少 HTTP 請求次數並改善網頁載入時間。在遊戲開發中常用於角色動畫。
- steps() 函數
- 一種 CSS 緩動函數，能讓數值以不連續的步進方式改變，而非平滑過渡。例如，
steps(4)會將過渡分成 4 個明顯的跳躍。它是建立 CSS Sprite 動畫的關鍵組件。 - @keyframes
- 一種 CSS 規則，用於定義動畫期間的中間狀態。在 Sprite 動畫中，它通常指定
background-position偏移圖片的總寬度，從 0% (起點) 到 100% (終點)。 - background-position
- 一種 CSS 屬性，指定背景圖片的初始位置。透過負向偏移這個數值，Sprite Sheet 的不同影格就會進入元素的顯示範圍內。
- Alpha 色版 (Alpha Channel)
- 決定透明度的圖片資料部分。與只能支援 1 位元透明度 (完全不透明或完全透明) 的 GIF 不同，使用 PNG 可實現精美的半透明漸層效果。
常見問題
- Q.我上傳的圖片會傳送到伺服器嗎？
- 不會。本工具處理所有圖片 (包括載入、合併與產生程式碼) 的過程完全在您的瀏覽器內部進行。不會有任何資料傳送到外部伺服器，非常安全。
- Q.GIF 動畫和 CSS Sprites 有什麼不同？
- 雖然 GIF 是簡單的獨立檔案，但它們受限於 256 色，且缺乏適當的半透明度。CSS Sprites 運用 PNG 提供高品質視覺效果，並允許透過 CSS 進行靈活控制 — 讓您輕鬆改變播放速度、反轉方向或在游標懸停時暫停。
- Q.我可以合併不同大小的圖片嗎？
- 由於 CSS Sprites 的運作機制，每個影格的尺寸 (寬度與高度) 都必須一致。如果您上傳大小不同的圖片，工具會根據第一張圖片的大小進行對齊，這可能會造成非預期的裁切或對齊問題。建議您先統一圖片尺寸。
- Q.我該如何支援 Retina 顯示器 (高解析度)？
- 為了確保在高解析度螢幕 (如 Retina 顯示器) 上呈現清晰的視覺效果，請以目標顯示解析度的兩倍大小建立您的 Sprite Sheet。然後，使用 CSS
background-size屬性將元素縮小至實際的顯示大小。 - Q.Sprite sheet 建議的最大尺寸是多少？
- 一般來說，最好將最大尺寸保持在 2048x2048 像素以內。過大的 Sprite sheet 會消耗行動裝置大量的記憶體，可能會導致動畫卡頓或瀏覽器崩潰。將尺寸最佳化至 1024x1024 像素或更小通常是安全的。
使用場景
載入動畫
非常適合用於建立應用程式或網頁載入期間顯示的自訂旋轉動畫或進度條。它們能以極低的 CSS 負載高效執行，並支援精美的半透明設計。
角色移動 (遊戲 UI)
為瀏覽器遊戲與互動網站中的角色建立「走路」、「跑步」或「跳躍」等動作迴圈。切換動作就像切換 CSS 類別一樣簡單。
互動式 UI 圖示
非常適合在使用者將游標懸停在按鈕上或點擊「最愛」愛心時，呈現動態的圖示變化。您可以利用 :hover 或切換類別來流暢地觸發這些動畫。
高品質橫幅廣告
在需要吸引人的動態效果時，這是一種有效的方式，且不會產生 GIF 檔案常見的畫質降低問題。搭配 PNG 壓縮，您能提供清晰、引人注目的動態橫幅廣告。
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.