LESSON-13 · TOPIC 04
能建立有限兩次的動畫、明確 fill-mode，並在 animationend 後移除播放 class。
能建立有限兩次的動畫、明確 fill-mode，並在 animationend 後移除播放 class。
無限或無停止條件的裝飾動畫會持續分散注意與耗用資源；最終狀態若不明確也會造成元素跳回。
要修改的檔案：files/starter/style.css
定位：先讀 animation-name/duration/iteration-count/fill-mode，確認不是 infinite。｜依 module-4 定位，只修改「iteration、fill-mode 與停止條件」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
儲存成功提示持續閃爍，直到使用者換頁才停止。
起始狀態：目標沒有 finite-animation，iteration-count computed為1。
現有 runtime iteration-count 由1變2；required facts iterationCount=2、fillMode=both、animationEnd=true、finalClass 不含 finite-animation。
驗收證據：before=1、after=2、fillMode=both、animationEnd=true、finalClass已清理
成功提示、一次性 highlight 或有限次 attention cue，不需要永久循環時。
常見混淆：animationend 不會在 animation 被移除或元素 display:none 中途取消時正常觸發；取消需另處理 animationcancel。
這段程式是理解起點，不是要你直接跳過 Starter。
動畫要先說清楚播幾次、結束停在哪裡，以及什麼事件代表真的播完。
正式說法：animation-iteration-count controls repeat count；animation-fill-mode applies keyframe styles before/after active interval；animationend signals normal completion and can trigger state cleanup。
.notice.is-animating{animation:pulse 240ms ease 2 both}notice.addEventListener('animationend',()=>notice.classList.remove('is-animating'))每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/style.css 定位：先讀 animation-name/duration/iteration-count/fill-mode，確認不是 infinite。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先讀 animation-name/duration/iteration-count/fill-mode，確認不是 infinite。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先讀 animation-name/duration/iteration-count/fill-mode，確認不是 infinite。。
檔案：files/starter/style.css 定位：先讀 animation-name/duration/iteration-count/fill-mode，確認不是 infinite。
要做：執行實驗切換 finite-animation，讀 iteration-count；完整 probe 等待 animationend 並驗 final class。
預期：現有 runtime iteration-count 由1變2；required facts iterationCount=2、fillMode=both、animationEnd=true、finalClass 不含 finite-animation。
證據：before=1、after=2、fillMode=both、animationEnd=true、finalClass已清理
卡住先查：先讀 animation-name/duration/iteration-count/fill-mode，確認不是 infinite。
檔案：files/starter/style.css 定位：先讀 animation-name/duration/iteration-count/fill-mode，確認不是 infinite。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：現有 runtime iteration-count 由1變2；required facts iterationCount=2、fillMode=both、animationEnd=true、finalClass 不含 finite-animation。
證據：before=1、after=2、fillMode=both、animationEnd=true、finalClass已清理
卡住先查：先讀 animation-name/duration/iteration-count/fill-mode，確認不是 infinite。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
儲存成功
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先把 infinite 改成明確數字2。
設定 fill-mode:both，監聽 animationend。
完整解答與原因：動畫只播兩次，both 定義前後樣式；正常完成後 animationend 清除 class，避免重播狀態殘留。