Clip Reveal (裁切顯現)

遮罩收縮或遮色片邊緣擴展，逐漸露出圖片。

在[套用位置]加入「圖片擦除顯現」(Image Reveal Wipe)，也叫 mask reveal 或 clip-path reveal。
圖片捲動進入畫面時，遮罩從一側擦除，隨捲動進度平順地露出圖片，並在圖片離開畫面之前早早完全展開。
預留圖片所占空間，避免版面跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，直接完整顯示圖片。

遮罩形狀劃過或跟隨游標，露出下方的內容。

在[套用位置]加入「SVG 遮罩顯現」(SVG Mask Reveal) 懸停效果，也叫 clip-path reveal 或聚光燈遮罩 (spotlight mask)。
游標移上去時，圓形遮罩從中心擴大，露出下方的內容；游標移開後再收合：流暢且偏快。
兩個圖層保持完全相同的尺寸，避免任何位移；鍵盤聚焦和點按時也顯示同樣的顯現效果。

文字從一條裁切線後方向上滑出，彷彿憑空出現。

在[套用位置]加入「遮罩文字顯現」(Mask Reveal) 文字進場效果，也叫行遮罩顯現 (line mask reveal) 或文字遮罩 (text masking)。
每一行文字從一條看不見的邊緣後方向上滑出，彷彿憑空出現，一行接一行，快速流暢，不要有彈跳感。
文字捲動進入畫面時只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示文字、不做動畫。

實色面板掃過螢幕遮住舊頁面，隨後收回，露出新頁面。

在[套用位置]加入「布幕擦除轉場」(Curtain / Panel Wipe) 頁面轉場，也叫 page wipe 或 staggered panels。
實色面板依序掃入，遮住舊頁面；頁面在完全被遮住時切換，接著面板繼續移出畫面，露出新頁面：大膽而流暢。
面板遮住舊頁面之前絕不能露出新頁面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就改用單純的淡入淡出。

元素在原位從完全透明變為完全不透明，離開時則反過來。

在[套用位置]加入「淡入/淡出」(Fade In / Fade Out) 動畫，也叫 fade。
元素出現時在原位從完全透明變為完全可見，離開時以同樣方式淡出：柔和，不要位移或縮放。
淡出後要確保它無法再被點擊或用鍵盤聚焦；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就瞬間切換。

元素從一側移動一小段距離到最終位置，同時淡入。

在[套用位置]加入「方向淡入」(Fade In Directional) 進場動畫，也叫 fade in left、fade in right 或 fade in down。
元素從一側移動一小段距離到最終位置，同時淡入：快速流暢，到位時減速，不要彈跳。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

元素朝一個方向移開，同時淡出。

在[套用位置]加入「方向淡出」(Fade Out Directional) 退場動畫，也叫 fade out up 或 fade out down。
元素朝一個方向移動一小段距離並淡出：快速，離開時逐漸加速。
等淡出結束後再將它從版面中移除，避免相鄰內容提前跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。