替 CTA 補 hover 與 focus-visible 回饋
條件：用 DevTools 對照一般、hover、active 與 Tab focus-visible 狀態，確認 transition 放在一般狀態且焦點 outline 可見。 驗收：按鈕有平順位移、按壓回饋與焦點框，且 transition 與 focus-visible 責任位置說得清楚
CHAPTER 10 · 150 MINUTES
狀態、轉場、動畫與 CTA
按鈕雖然能點，卻沒有清楚回應滑入、鍵盤焦點或處理中的狀態；動畫如果只求熱鬧，反而會干擾閱讀。
3個明確任務
2個接回點
1份可見成果
LEARNING GOALS
本章結束時，你能做出什麼
用 keyframes 表達處理中狀態
條件：重新整理後用 DevTools Animations 或 Computed 觀察 status-pulse 的有限次播放與 opacity 變化。 驗收：處理中標籤以有限次淡入淡出提示狀態，文字訊息仍然可讀
為減少動態偏好提供靜態版本
條件：模擬 reduced-motion 後重新整理，確認 transition 與 animation 關閉，並用 Tab 與文字檢查可操作性仍在。 驗收：系統偏好減少動態時取消非必要轉場與動畫，但焦點與狀態文字仍保留
進場檢核與作品接力
- 具備第 09 章成果：完成可重複套用的按鈕與卡片樣式組：不看答案，展示或口述第 09 章成果，並說出一項可見證據。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回
輸入：第 09 章產物：完成可重複套用的按鈕與卡片樣式組
本章輸出：有目的、可操作且尊重減少動態偏好的互動回饋
產物類型：mainline；後續用途：第 11 章
PROBLEM & ANALOGY
先理解責任，再寫語法
轉場像電梯門平順開合；關鍵影格像分鏡表；CTA 則像出口指示牌，動效只能幫人確認方向，不能搶走內容。
本章要解決：按鈕雖然能點，卻沒有清楚回應滑入、鍵盤焦點或處理中的狀態；動畫如果只求熱鬧，反而會干擾閱讀。
接住上一章：第 09 章完成的按鈕與卡片元件。
合回共同作品：本章成果必須回到同一份作品集檢查，不另開一個無關小作品。
把名詞對回畫面與程式
- :hover / :focus-visible
- 分別回應滑鼠與鍵盤焦點，不能只靠顏色猜狀態。
- transition
- 讓狀態改變平順，不是自動循環的動畫。
- @keyframes
- 描述處理中狀態的時間分鏡。
- prefers-reduced-motion
- 提供少動或靜態版本。
- CTA
- 主要行動入口，動效要幫助辨識而不是搶走內容。
SCOPE
今天的學習邊界
能自己完成
替 CTA 補 hover 與 focus-visible 回饋；用 keyframes 表達處理中狀態；為減少動態偏好提供靜態版本。
看得懂即可
能辨識 Animate.css、AOS、GSAP、Lottie 的用途地圖，但不安裝套件。
刻意延後
不教複雜時間軸、捲動偵測或 JavaScript 動畫控制。
本章術語：狀態、transition、transform、keyframes、CTA、prefers-reduced-motion。遇到英文先回到畫面責任，不要求背拼字。
CORE IDEAS
三個核心觀念
- 狀態改變才用 transition；需要自行播放的流程才用 animation。
- 互動不能只靠顏色，鍵盤焦點要清楚可見。
- 重要文字預設就可讀，動畫失效時仍能完成操作。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：把 transition 寫在 :hover 內，接著移開滑鼠，讓學生觀察只有進場平順、退場瞬間跳回；再移回基本狀態。
- 完全沒效果：先查 class 是否為
.cta-button，再查 style.css 是否載入。 - 只有滑入平順：檢查 transition 是否誤寫在 hover 規則。
- 鍵盤看不到位置：檢查是否移除了 outline，並補回 focus-visible。
固定順序：先重現 → 讀 Console／Styles → 確認檔案與元素 → 一次只修一處 → 重跑原操作。
滑入有動畫但退場瞬間跳回
先查：先查 transition 是否誤寫在 hover。
Tab 看不到焦點
先查：用鍵盤重現，確認沒有移除 outline，並補上 focus-visible。
減少動態仍在閃
先查：查 media query 是否覆蓋 transition 與 animation。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架，任務一路加厚
開始前先確認這四件事
- 我已列出一般、hover、按下與 focus 狀態。
- 我能說出哪個改變用 transition、哪個流程用 animation。
- 我會用 Tab 鍵測焦點，不只用滑鼠。
- 我會開啟減少動態偏好再測一次。
讓 CTA 的滑入、按下與鍵盤焦點可辨識
檔案：style.css
位置：依任務文字搜尋對應元素或函式
結果：按鈕有平順位移、按壓回饋與焦點框
替處理中徽章加入有限度的動畫
檔案：style.css
位置：依任務文字搜尋對應元素或函式
結果：處理中標籤以淡入淡出提示狀態
尊重減少動態效果偏好
檔案：style.css
位置：依任務文字搜尋對應元素或函式
結果：系統偏好減少動態時取消轉場與動畫
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
CTA 的 ______ 狀態用 ______ 表達；我用 Tab 看到 ______；減少動態時 ______ 仍可完成。
不要用動畫取代資訊或操作提示；動效停止後，文字與按鈕仍必須清楚可用。
錄下滑鼠、鍵盤與 reduced-motion 三種操作，並口頭說明哪一個是 transition、哪一個是 animation。
課次交棒：本章 150 分鐘結束後，同一次課剩餘 30 分鐘直接進入第 11 章，用 DevTools 找出故意覆蓋 focus 樣式的規則。
下一章：第 11 章將用 DevTools 找出 CSS 覆蓋並整理共用規則。