Blur Out (模糊出場)

元素從放大、模糊、透明的狀態縮小到清晰，像一團煙霧聚攏；離開時則反向進行。

在[套用位置]加入「煙霧入場/出場」(Puff In / Puff Out) 動畫，也叫 puff。
出現時，元素從放大、模糊、透明的狀態縮小到清晰，像一團煙霧緩緩落定；離開時再膨脹成一片模糊並消失：柔和、偏快。
放大狀態不要擠動版面或產生捲軸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接切換。

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

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

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

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

元素從嚴重模糊的狀態逐漸變清晰，常伴隨滑入或淡入。

在[套用位置]加入「模糊入場」(Blur In) 進場動畫，也叫 text focus in、focus in 或 blur text reveal。
內容從嚴重模糊且透明的狀態開始，在原地逐漸變清晰：柔和、偏慢，沒有位移。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示清晰的文字。

元素以超出後回落的彈跳方式進場，可以是放大出現，也可以從邊緣落下。

在[套用位置]加入「彈跳入場」(Bounce In) 進場動畫，也叫 bounce in down 或 bounce in up。
元素從小逐漸放大，略微超過完整尺寸後晃動幾下再穩定下來：快速、有彈性。
只播放一次，以免一直搶走注意力；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

元素輕輕彈一下，然後縮小消失或從邊緣飛出。

在[套用位置]加入「彈跳出場」(Bounce Out) 退場動畫。
元素先輕輕下沉，再略微脹大超過原尺寸，然後一邊縮小一邊淡出：短促、有彈性。
等動畫結束後再將它從版面中移除；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

clip-path 或遮罩從邊緣或某一點展開，逐步露出圖片或文字。

在[套用位置]加入「裁切顯現」(Clip Reveal) 進場效果，也叫 mask reveal、wipe reveal 或 image reveal。
讓裁切邊緣由左往右掃過，內容保持不動、逐步顯露出來：流暢，開始和結束都要柔和。
從一開始就為元素保留空間，避免版面移動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接完整顯示。