Ripple (漣漪效果)

游標懸停時一個彩色圓形從中心放大或往中心收縮，填滿元素。

在[套用位置]加入「圓形填充」(Radial Fill) 懸停效果，也叫 circle expand。
新顏色的圓形從中心流暢地放大到填滿元素，游標移開後再縮回中心，同時文字顏色隨之切換，保持清楚易讀。
圓形要裁切在元素形狀之內，文字位在它上方；鍵盤聚焦時也顯示同樣的效果。

新畫面在一個從點擊位置向外擴展的圓形中顯現。

在[套用位置]加入「圓形顯現」(Circular Reveal) 轉場，也叫 clip-path circle expand 或 theme toggle reveal。
新畫面在一個從被按下的控制項處向外擴展的圓形中出現，直到覆蓋整個區域：平順、穩定，起止都要和緩。
圓形要正好從按下控制項的位置開始；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就不用圓形、直接切換。

同心圓從中心點向外擴散並逐漸淡出。

在[套用位置]加入「漣漪圓環」(Ripple Rings) 效果，也叫 background ripple 或 concentric ripples。
圓環從中心點不斷向外擴散，越大越淡，一個接一個、間距均勻：緩慢而穩定。
中心元素保持靜止、位置不變；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就停止漣漪。

一層半透明覆蓋層替元素染上顏色，表示游標正停在上面。

在[套用位置]加入「懸停狀態層」(Hover State Layer)，也叫 hover state、state layer 或 hover overlay。
游標懸停時，一層使用內容顏色的淡淡半透明覆蓋層快速淡入蓋住元素，游標移開後淡出。
保持夠淡，不影響對比度；聚焦和按下狀態也使用同樣的狀態層做法。

圓圈和勾號自行畫出，確認操作已成功。

在[套用位置]加入「成功打勾」(Success Checkmark) 動畫，也叫 animated success tick。
先用一筆流暢的線條畫出圓圈，接著在圓圈內畫出勾號，整個圖示再輕輕彈一下：沉穩、篤定。
操作成功時只播放一次，搭配螢幕閱讀器能唸出的文字訊息；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示畫好的圖示。

橫向滑動清單列，露出刪除或封存等操作按鈕。

在[套用位置]加入「滑動刪除」(Swipe to Delete) 互動，也叫 swipe actions 或 swipe to reveal。
橫向拖曳某一列時，它直接跟著手指移動，露出後方的封存、刪除等操作按鈕，按鈕完全露出後停住；放開後平順地滑到定位，不要回彈。
橫向滑動時仍要確保垂直捲動可用，並讓鍵盤和螢幕閱讀器使用者不必滑動也能執行相同操作。

圓形滑塊沿軌道滑動，軌道顏色在關和開之間切換。

在[套用位置]加入「切換開關」(Toggle Switch) 動畫，也叫 switch。
開啟或關閉時，圓形滑塊平順地滑到軌道另一端，同時軌道顏色跟著改變：快速、俐落，不要彈跳。
做成真正符合無障礙的開關 (帶有 checked 狀態的 role="switch")，並且支援鍵盤操作。