STEP GUIDE · Checkpoint 2

這個步驟要做什麼、改哪裡、怎麼看結果

這一步聚焦 TASK-02;下方只比較「Checkpoint 1 → Checkpoint 2」的真實異動。

01

三項 Task 進度

TASK-01已完成

讓 CTA 的滑入、按下與鍵盤焦點可辨識

預計修改:style.css

完成後:按鈕有平順位移、按壓回饋與焦點框

TASK-02本步驟處理

替處理中徽章加入有限度的動畫

預計修改:style.css

完成後:處理中標籤以淡入淡出提示狀態

TASK-03稍後處理

尊重減少動態效果偏好

預計修改:style.css

完成後:系統偏好減少動態時取消轉場與動畫

02

HTML、CSS、JavaScript 與文件實際異動

展開檔案卡查看必要差異;只有程式碼區可以橫向捲動。

HTML本步驟無異動

檔案:index.html

修改前

前一步與本步驟沒有實質差異。

修改後

本步驟不需修改此語言。
CSS本步驟有異動

檔案:style.css

修改前

.status-pill { animation: none; }

修改後

.status-pill { animation: status-pulse 1.4s ease-in-out 3; }
@keyframes status-pulse { 50% { opacity: 0.45; transform: scale(0.98); } }
JavaScript本練習未使用

檔案:script.js

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。
README/其他文件本練習未使用

檔案:README.md

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。
03

怎麼看到結果

  1. 準備

    先準備滑鼠、Tab 鍵與作業系統的減少動態效果設定。

  2. 操作

    重新整理後等待數秒,觀察處理中徽章是否有限度地淡入淡出。

  3. 預期

    處理中標籤以淡入淡出提示狀態

Checkpoint 2 TASK-02

替處理中徽章加入有限度的動畫

完成後可見:處理中標籤以淡入淡出提示狀態

作品正在準備

讓互動回饋有目的

先用 Tab 找到按鈕,再用滑鼠比較滑入、按下與等待狀態。

查看作品成果

沒有動畫時,這段重要說明仍然可讀。