Modal Scale-Fade In (對話框縮放淡入)

浮動選單從觸發按鈕所在的位置一邊放大一邊淡入。

在[套用位置]加入「彈出選單展開」(Popover / Dropdown Open) 動畫，也叫 menu pop 或 dropdown scale-fade。
選單從觸發按鈕旁的角落一邊微微放大一邊淡入，要快速、俐落；關閉時淡出得稍快一些。
讓選單始終貼著觸發按鈕，按 Escape 或點擊外部即可關閉，並在觸發按鈕上向螢幕閱讀器標示展開狀態。

元素從小而透明的狀態放大到完整尺寸，同時淡入。

在[套用位置]加入「縮放入場」(Zoom In) 進場動畫，也叫 scale in。
元素從小而透明放大到完整尺寸，同時淡入：快速、流暢，不要放大過頭再縮回。
以中心為基準縮放，不影響周圍版面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

縮圖從原位置放大，在變暗的背景上置中顯示為大圖。

在[套用位置]加入「燈箱縮放」(Lightbox Zoom)，也叫 image zoom overlay 或 Medium-style zoom。
點擊縮圖時，它從原位置平順放大成置中的大圖，背後的頁面隨之變暗退後；關閉時再縮回原本的位置。
支援按 Esc 或點擊背景關閉；開啟期間把焦點移到大圖檢視內，關閉後把焦點還給縮圖。

一層半透明的深色遮罩在浮層後方淡入，讓頁面變暗。

在[套用位置]加入「背景遮罩淡入」(Backdrop Scrim Fade)，也叫浮層淡入 (overlay fade) 或遮罩 (scrim)。
浮層開啟時，一層半透明的深色遮罩在後方頁面上柔和地淡入，比浮層本身稍慢一點；關閉時再淡出。
不論淺色或深色主題，遮罩都維持深色；遮罩顯示期間，後方頁面不能捲動，也不能接收點擊。

元素彷彿移動並縮放到新位置上對應的元素，看起來是同一個物件。

在[套用位置]加入「共享版面動畫」(Shared Layout Animation)，也叫頁面內共享元素 (in-page shared element)。
選取項目改變時，元素要從舊位置平順地移動並縮放到新位置，輕柔地就定位，讓人看出這是同一個物件而不是兩個。
任何時刻只顯示一份，移動過程中不要讓周圍版面跳動。

底線或膠囊形背景從舊頁籤滑動到新選取的頁籤。

在[套用位置]加入「頁籤指示器滑動」(Tab Indicator Slide)，也叫 sliding underline 或 active tab indicator。
選取新頁籤時，底線從舊頁籤滑到新頁籤，快速並平順減速；如果兩個頁籤寬度不同，就順勢伸縮到新頁籤的寬度。
保持正確的頁籤語意並支援方向鍵切換；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，指示器就直接移過去，不做滑動。