LESSON-13 · TOPIC 03
能從 transition shorthand 精準拆出 property、duration、timing-function、delay，並與 computed longhands 對照。
能從 transition shorthand 精準拆出 property、duration、timing-function、delay，並與 computed longhands 對照。
把 duration 與 delay 看反，或用 transition:all，會讓不應動畫的 property 也產生延遲與難以追蹤的行為。
要修改的檔案：files/starter/style.css
定位：在 Computed 分別展開四個 transition longhands。｜依 starter-3 定位，只修改「transition shorthand 拆讀」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
按鈕 hover 延遲很久，團隊看 shorthand 時把80ms delay誤當成 duration。
起始狀態：目標 transition 為 all 0s ease 0s。
現有 runtime transition after 包含 opacity/.24s/ease-out/.08s；required facts 四個 longhands 精準一致。
驗收證據：after包含 opacity、0.24s、ease-out、0.08s；property/duration/timingFunction/delay facts一致
閱讀既有 transition、除錯延遲或限制只動畫必要 property 時。
常見混淆：duration 是播放多久；delay 是開始前等待多久，兩者都可寫 time 但責任不同。
這段程式是理解起點，不是要你直接跳過 Starter。
一條 shorthand 依序說明『改誰、多久、怎麼走、等多久才開始』。
正式說法：The transition shorthand represents transition-property, transition-duration, transition-timing-function and transition-delay entries；omitted values receive initial defaults。
transition:opacity 240ms ease-out 80ms;每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/style.css 定位：在 Computed 分別展開四個 transition longhands。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「在 Computed 分別展開四個 transition longhands。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 在 Computed 分別展開四個 transition longhands。。
檔案：files/starter/style.css 定位：在 Computed 分別展開四個 transition longhands。
要做：執行實驗切換 configured-transition，讀 computed shorthand；完整 probe 回傳四個 longhands。
預期：現有 runtime transition after 包含 opacity/.24s/ease-out/.08s；required facts 四個 longhands 精準一致。
證據：after包含 opacity、0.24s、ease-out、0.08s；property/duration/timingFunction/delay facts一致
卡住先查：在 Computed 分別展開四個 transition longhands。
檔案：files/starter/style.css 定位：在 Computed 分別展開四個 transition longhands。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：現有 runtime transition after 包含 opacity/.24s/ease-out/.08s；required facts 四個 longhands 精準一致。
證據：after包含 opacity、0.24s、ease-out、0.08s；property/duration/timingFunction/delay facts一致
卡住先查：在 Computed 分別展開四個 transition longhands。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先圈出 property 名稱與兩個 time 值。
第一個 time 是 duration，第二個 time 是 delay。
完整解答與原因：opacity 是 property、240ms 是 duration、ease-out 是 timing-function、80ms 是 delay；只動畫必要 property。