Puff In / Puff Out (煙霧入場/出場)

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

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

元素縮小並淡出，直到消失。

在[套用位置]加入「縮放出場」(Zoom Out) 退場動畫，也叫 scale out。
元素朝中心縮小並淡出，直到消失：快速，逐漸加速。
完全消失後再從版面和鍵盤焦點中移除；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

元素在淡出或滑出的同時逐漸變模糊。

在[套用位置]加入「模糊出場」(Blur Out) 退場動畫，也叫 text blur out 或 smoky text dissipate。
內容在原地越來越模糊並逐漸淡出：柔和、偏慢，彷彿消散一般。
等模糊效果結束後再隱藏或移除元素；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

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

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

元素像輪子一樣從左側滾入，同時淡入。

在[套用位置]加入「翻滾入場」(Roll In) 進場動畫。
元素像輪子一樣邊轉動邊從左側滾入，同時淡入：流暢，落定時減速。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

元素向右滾出，同時淡出。

在[套用位置]加入「翻滾出場」(Roll Out) 退場動畫。
元素像輪子一樣邊轉動邊向右滾出，同時淡出：流暢，離開時加速。
等它完全滾走後再從版面中移除；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

元素繞某個角或自身中心旋轉進場，同時淡入。

在[套用位置]加入「旋轉入場」(Rotate In) 進場動畫，也叫 rotate in down left。
元素從傾斜的角度出發，繞左下角旋轉到定位，同時淡入：流暢、從容，落定時逐漸減速。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。