Container Transform (容器轉換)

對應的元素（例如縮圖）在頁面之間變換位置和大小。

在[套用位置]加入「共享元素轉場」(Shared Element Transition)，也叫 hero transition 或 view-transition-name morph。
進入下一頁時，對應的元素（例如縮圖）平順地移動並放大到新頁面上的位置，其餘內容交叉淡化；返回時再縮回去。
給兩個頁面上對應的元素同一個共享識別，確保正確配對；瀏覽器無法變換時，退回為單純的交叉淡化。

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

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

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

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

對話框在變暗的頁面上方，從中心稍微放大並淡入。

在[套用位置]加入「對話框縮放淡入」(Modal Scale-Fade In) 動畫，也叫對話框開啟動畫 (dialog open animation) 或縮放淡入對話框 (zoom-fade dialog)。
後方頁面變暗的同時，對話框從中心稍微放大並淡入：快速、含蓄，不要回彈。
每次開啟對話框都播放一次，把焦點移進對話框並留在裡面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，只用簡單的淡入。

拖曳某一項時，其他項目滑開讓位，並依新的順序排好。

在[套用位置]加入「拖曳排序清單」(Drag-to-Reorder List)，也叫可排序清單 (sortable list)。
被拖曳的項目直接跟著游標並微微浮起，其他項目平順地滑開讓位；放開後，它迅速落入最近的位置。
同時支援觸控和滑鼠，並提供用鍵盤移動項目的方式，把新位置報讀給螢幕閱讀器。

側邊面板從左、右或頂部邊緣滑入，推開或覆蓋頁面內容。

在[套用位置]加入「抽屜滑動」(Drawer Slide)，也叫畫布外選單 (off-canvas) 或側邊面板 (side sheet)。
面板從側邊滑入並覆蓋在內容上方，同時後方頁面變暗，速度快、平順減速；關閉時用同樣的方式滑出。
抽屜開啟時把鍵盤焦點留在裡面，可以用 Escape 鍵或點擊變暗區域關閉，關閉後把焦點還給開啟它的按鈕。

版面變動後，元素平順地移動到新的位置和尺寸。

在[套用位置]加入「FLIP 版面動畫」(FLIP Layout Animation)，也叫版面動畫 (layout animation) 或 First-Last-Invert-Play。
版面變動時，每個元素從舊位置平順移動到新位置，而不是直接跳過去：一開始快，最後輕柔地定位。
只用 transform 做動畫，避免頁面每一格都重新排版；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接切換到新版面。