CSS 動畫產生器
直覺地建立 CSS 動畫 (@keyframes)。
支援 12 種實用預設集，透過參數微調並可即時預覽效果。
動畫參數設定
CSS 程式碼輸出
關於本工具
「CSS 動畫產生器」是一款免費的線上工具，能讓您以視覺化的方式建立並預覽使用 CSS @keyframes 的動畫，並自動為您產生所需的 CSS 程式碼。內建淡入淡出、滑動、縮放、彈跳等 12 種基本的動畫預設集。
您可以透過拖拉滑桿與下拉式選單，直覺地微調諸如動畫持續時間 (Duration)、延遲時間 (Delay)、時間函數 (Easing)、播放次數 (Iterations) 以及填充模式 (Fill Mode) 等屬性，並在右側的預覽區即時看見修改後的結果。
調整滿意後，只需點擊「複製程式碼」按鈕，即可將產生的 CSS 貼上到您的專案中。此工具完全在您的瀏覽器端執行，不會將任何資料傳送至外部伺服器，安全且隱私有保障。
如何製作 CSS 動畫
選擇基礎效果
首先切換分類分頁（如「淡入淡出」、「滑動」），並選擇一個與您心目中想要的動畫效果最接近的預設集。
微調各項參數
透過滑桿調整動畫的持續時間、延遲啟動時間以及加減速曲線，並隨時觀察右側區塊的即時動態。
複製程式碼
動畫效果確認無誤後，點擊輸出區塊右上角的「複製程式碼」按鈕，將其直接貼上到專案的 CSS 檔案即可。
CSS 動畫詞彙表 (屬性指南)
animation-duration(持續時間)- 指定動畫播放一次所需花費的時間。可使用秒 (s) 或毫秒 (ms) 為單位。
animation-timing-function(時間函數 / Easing)- 控制動畫播放過程中的速度變化曲線（例如加速、減速）。例如 "linear" 代表等速播放，"ease-in-out" 則代表漸漸加速後再漸漸減速。
animation-delay(延遲時間)- 設定載入網頁後，或是為元素套上 class 後，需要等待多久才開始執行這段動畫。
animation-iteration-count(播放次數)- 指定動畫重複執行的次數。設定為 "infinite" 即可讓動畫無止盡的無限循環播放。
animation-direction(播放方向)- 指定動畫播放的方向。例如 "reverse" 會倒轉播放；"alternate" 則是奇數次正向、偶數次倒轉播放。
animation-fill-mode(填充模式)- 指定元素在動畫開始前與結束後，應保持什麼樣的樣式狀態。若設為 "forwards"，動畫結束後元素會停留在最後一個影格的狀態。
transition-property(套用屬性)- 指定哪些 CSS 屬性要套用 transition 漸變效果 (例如: transform, opacity, 或 all)。
transition-duration(漸變持續時間)- 指定從初始狀態變化到新狀態（例如滑鼠 hover 時）所需花費的時間。
關於 CSS 動畫的常見問題 (FAQ)
- Q.CSS animation 和 transition 有什麼不同？
transition主要用於當元素的狀態發生改變時（例如加上 hover 樣式），讓兩個狀態之間平滑地轉換。而animation則不一定需要觸發條件就能自動播放，並且能使用 @keyframes 針對過程中各個時間點的狀態進行更精細的控制。- Q.哪些屬性的動畫效能比較好？
- 盡量使用
transform（如位移、縮放、旋轉）以及opacity（透明度）來製作動畫，瀏覽器會使用 GPU 硬體加速，效能最好。對width、height或是margin進行動畫會強迫瀏覽器重新計算排版 (Reflow)，容易造成卡頓。 - Q.什麼是 prefers-reduced-motion？
- 這是一個針對可能因動畫導致眩暈等不適的使用者而設計的 CSS 媒體查詢。為了網頁無障礙體驗，建議加入
@media (prefers-reduced-motion: reduce)來關閉或大幅減少動畫特效。 - Q.animation-fill-mode 必須設定為 forwards 嗎？
- 以淡入效果為例，若未指定
forwards，元素在動畫播完時會立刻恢復為最初的透明狀態。如果您希望它在動畫結束後保持「已顯示」的狀態，就必須加上這個設定。 - Q.我的資料會被傳送到伺服器嗎？
- 不會，此工具的運算都在您的瀏覽器本地進行，沒有任何資料會被傳送出去。
CSS 動畫的應用場景
網頁載入時的入場動畫
套用淡入 (Fade-in) 或從底部滑入的動畫效果，讓網頁內容在剛載入時顯得更生動，提升第一印象。
強調按鈕與行動呼籲 (CTA)
為重要的轉換按鈕加上如心跳般縮放 (Pulse) 或是彈跳 (Bounce) 的微動畫，自然地吸引使用者的目光。
滾動視差與觸發動畫
結合 Intersection Observer API 以及在此產生的 CSS class，讓元素在進入使用者可視範圍的瞬間觸發動畫。
載入與等待提示 (Loading UI)
在等待資料回傳或是表單送出的過程中，提供無限旋轉或漸隱閃爍的載入動畫作為視覺回饋。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.