CSS Animation Generator
Build CSS keyframe animations with live preview.
Box
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 1s ease 0s 1 normal both;
}關於本工具
CSS動畫生成器透過配置關鍵影格預設、時間、持續時間、延遲和迭代設定來建立流暢的CSS動畫。即時預覽顯示動畫效果，可直接複製完整的@keyframes規則和animation簡寫。
使用transform和opacity屬性的CSS動畫在GPU上合成，不會觸發版面配置或重繪，因此效能高效。
使用方法
- 從下拉選單中選擇動畫類型。
- 設定持續時間（如0.5s、2s）。
- 選擇控制緩動的時間函數。
- 可選設定動畫開始前的延遲。
- 設定迭代次數（數字或infinite）。
- 點擊重播預覽，然後複製匯出CSS。
使用情境
前端開發者使用淡入淡出和滑動動畫提升內容載入時的感知效能。UI設計師原型化按鈕脈衝、通知抖動等微互動。
常見問題
- fill-mode: both是什麼？ — 動畫在開始前（考慮延遲）套用起始樣式，結束後保持結束樣式。這是最常用的設定。
- 如何讓動畫永遠循環？ — 將迭代次數設定為infinite。
- CSS動畫比JavaScript動畫更好嗎？ — 對於簡單的聲明式效果，CSS動畫更受歡迎。對於複雜的序列或互動性，JavaScript提供更多控制。