什麼是CSS動畫產生器?
這款視覺化CSS動畫產生器讓您無需手寫程式碼即可建立複雜的關鍵影格動畫。定義關鍵影格、調整緩動函式、設定持續時間和延遲,然後直接複製產生的CSS程式碼到專案中。適用於按鈕效果、載入動畫、懸停效果和頁面轉場等場景。
使用方法
- 選擇一個動畫預設(淡入、滑動、彈跳、旋轉)或從頭開始在時間軸上新增關鍵影格。
- 調整每個關鍵影格的屬性——變換、透明度、顏色、縮放——並微調緩動曲線、持續時間和重複次數。
- 即時預覽動畫效果,然後複製產生的CSS @keyframes程式碼或下載為.css檔案。
結果
一位前端工程師需要為作品集頁面的卡片製作平滑的入場動畫。他設定了一個0.6秒ease-out的動畫,從下方20px處淡入,複製CSS後為每張卡片設定了交錯延遲。