什麼是 CSS 動畫產生器？

免費線上 CSS 動畫產生器。透過視覺化編輯器建立 CSS 關鍵幀動畫。

CSS 動畫透過動作、視覺回饋與吸引人的轉場效果，為網頁介面注入生命力。從細緻的滑鼠懸停效果到引人注目的載入指示器，關鍵影格動畫都是現代網頁設計不可或缺的要素。CSS 動畫產生器提供 10 種現成的關鍵影格動畫，並支援自訂時間、緩動與重複設定。

您可以選擇 bounce、shake、pulse、spin、fade in、slide in left、slide in right、flip、wobble 與 swing。每種動畫都有專屬的 @keyframes 定義，處理起始、中間與結束狀態。選取動畫後，即可立即在示範元素上預覽。

您可以調整持續時間（一個週期所需的時間，從 0.1s 到 10s）、緩動函式（ease、ease-in、ease-out、ease-in-out、linear 或自訂的 cubic-bezier 數值）、延遲（動畫開始前的等待時間，從 0s 到 5s）、重複次數（1、2、3、infinite 或自訂）與方向（normal、reverse、alternate、alternate-reverse）。

即時預覽會在示範元素上播放動畫，並同時顯示目前的 @keyframes 程式碼與完整的 CSS。一鍵即可複製完整的動畫程式碼——包含 @keyframes 規則與 animation 屬性。產生的程式碼使用無供應商前綴的語法，可在所有現代瀏覽器中正常運作。