什麼是CSS動畫產生器？
用視覺化方式建立CSS關鍵影格動畫，不用手寫程式碼。設定關鍵影格、選擇緩動函式、調整持續時間和延遲，然後把CSS程式碼直接複製到專案中。適合按鈕效果、載入動畫、懸停效果和頁面轉場。
從四十多個分門別類的現成動畫裡挑——淡入淡出、滑動、縮放、旋轉、彈跳、強調、退出與載入循環,或從零開始自己組。每一個關鍵影格都可調整不透明度、縮放、旋轉、水平與垂直位移、X/Y 傾斜、模糊、圓角、陰影與背景色。已經有 @keyframes 程式碼?貼到匯入視窗,視覺化編輯器會還原每一步。暫停預覽後拖曳紅色滑桿,可以逐影格觀察中間畫面,輸出是純粹的 @keyframes CSS,可直接貼進任何樣式表。
使用方法
- 選擇一個動畫預設（淡入、滑動、彈跳、旋轉）或從頭開始在時間軸上新增關鍵影格。
- 調整每個關鍵影格的屬性——變換、透明度、顏色、縮放——並微調緩動曲線、持續時間和重複次數。
- 即時預覽動畫效果，然後複製產生的CSS @keyframes程式碼或下載為.css檔案。
何時使用
- 為頁首區、彈窗或卡片加上頁面載入時的入場動畫。
- 為按鈕設計微互動,像是滑鼠移上去輕微放大,或表單錯誤時抖一下。
- 在接到框架之前,先用它快速打出 loading 旋轉圈和 skeleton 骨架的原型。
結果
一位前端工程師需要為作品集頁面的卡片製作平滑的入場動畫。他設定了一個0.6秒ease-out的動畫，從下方20px處淡入，複製CSS後為每張卡片設定了交錯延遲。
常見問題
- CSS animation 和 transition 差在哪裡?
- transition 是由觸發事件(hover、focus、class 變更)觸發,從 A 狀態到 B 狀態的一次性變化。animation 走 @keyframes 規則,可以含任意多個中間步驟、能循環,而且不需使用者動作就會在頁面載入時自動播放。
- 為什麼動畫只播一次就不見了?
- 動畫結束後元素會回到原本的樣式。把 animation-fill-mode 設成 forwards,最後一格的數值就會留下來;如果延遲期間也要套用第一格,改成 both。
- 想要自然的感覺,我該選哪一種緩動?
- 入場動畫用 ease-out,結尾減速會讓動作收得很穩。離場用 ease-in,效果剛好相反。cubic-bezier(0.34, 1.56, 0.64, 1) 會有輕微的彈回,看起來俏皮但不會太誇張。
- 舊瀏覽器跑得動這些動畫嗎?
- 2013 年之後發佈的瀏覽器全部直接支援 @keyframes,不用任何前綴。如果你要相容 IE 10 或更早版本才需要加 -webkit- 前綴,但這族群已經少到通常不值得為他們多寫 CSS。
- 怎麼讓動畫一直跑?
- 把迭代次數設成 infinite,再把方向設成 alternate,動畫就會每播完一次反向播一次,得到平滑的來回(很適合脈動和抖動類效果),而不是直接跳回起點。