CSS 動畫產生器
調整動態效果預設值或關鍵影格，並播放動畫進行檢查。取得可用於網頁的 CSS，以及 HTML 使用範例。
可執行的操作
從預設值調整動態效果
可從 12 種類型中選擇，包括進場、退場和旋轉。調整持續時間與重複次數，以符合需求。
也可編輯中間狀態
為每個關鍵影格指定移動、旋轉、縮放和不透明度，並檢查產生的動態效果。
取得 CSS 和 HTML
複製或儲存動畫 CSS，以及使用相同類別的 HTML 範例。
使用方式
選擇預設值
選擇所需的動態效果，並設定播放 1 次的持續時間。選擇其他預設值也會取代已調整的設定。
只調整需要的部分
開啟播放詳細資料或關鍵影格，以變更中間動態效果、方向、重複次數和其他設定。
產生並播放
選取「產生 CSS 並預覽」進行檢查。變更任何設定後，請重新產生。
取得 CSS 和 HTML
套用 CSS，並將 toollet-motion 類別新增至 HTML 元素。請搭配 CSS 使用 HTML 範例。
適用情境
建立進場動畫
使用淡入或由下方進場的預設值，調整進場動態效果和速度。
按鈕互動時播放動態效果
將開始條件改為懸停或鍵盤焦點，建立會回應互動的動態效果。
了解關鍵影格與播放條件
中間狀態與持續時間
關鍵影格的 % 代表其在播放 1 次期間的位置。動畫長 1 秒時，50% 即為 0.5 秒。緩動會決定各關鍵影格之間數值的變化方式。
移動、旋轉與外觀
水平／垂直位置表示相對於原始位置的移動量。縮放值為 1 時維持原始大小；不透明度為 0 時透明，為 1 時完全不透明。
延遲、重複與方向
延遲只會在播放開始前加入一次。有限次播放的總時間為：延遲 + 播放 1 次的持續時間 × 重複次數。交替會在正向和反向之間切換。
播放前後的狀態
選擇延遲期間和播放結束後要顯示的狀態。反向和交替設定會改變播放開始與結束時使用的關鍵影格位置。
減少動態效果設定
產生的 CSS 支援裝置的減少動態效果設定。動畫會停止，並使用依設定方向和重複次數決定的端點狀態。若為無限播放，則使用第一次播放的端點。
常見問題
可以只播放一次嗎？
關閉「持續重複」，並將重複次數設為 1。標準預設值會從播放 1 次開始，而旋轉和浮動預設會啟用持續重複。
應將 CSS 套用到哪個元素？
將 toollet-motion 類別新增至 HTML 元素，並搭配產生的 CSS 使用。HTML 使用範例是按鈕元素片段，並非完整的獨立網頁。
可以建立多少個關鍵影格？
可以設定 2–8 個關鍵影格，包含 0% 的起點和 100% 的終點。新增關鍵影格時，會放在區間最寬處的中點。起點和終點無法刪除，只有這兩者的 % 位置固定。
變更設定後，預覽消失了。
設定變更時會清除結果，避免誤用先前設定的動態效果或程式碼。請重新產生，以檢查目前設定。
為什麼預覽沒有動作？
裝置啟用減少動態效果時，動畫會停止。若使用懸停或焦點設定，也請檢查開始條件。切換至其他分頁時，預覽會暫停。
可以在同一個頁面使用多個動畫嗎？
產生的類別名稱和關鍵影格名稱會共用。若要使用不同動畫，請分別變更每個動畫的兩種名稱，並同步修改對應的 HTML。
輸入與結果
- 設定
- 12 種預設、2–8 個關鍵影格，以及 0.2–60 秒的持續時間。
- 播放
- 延遲 0–60 秒、重複 1–100 次或無限重複、緩動、方向、播放前後的狀態，以及開始條件。
- 輸出
- CSS 和 HTML 使用範例。僅定義動態效果，不會建立完整網頁或影片檔案。