Fade Out Directional (方向淡出)

元素滑出容器邊緣後消失。

在[套用位置]加入「滑出」(Slide Out) 退場動畫，也叫 slide out up 或 slide out down。
元素保持完全不透明，滑出容器邊緣後消失：快速，離開時加速。
在容器邊緣處裁切，離開畫面後對鍵盤和螢幕閱讀器也隱藏；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

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

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

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

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

元素縮小並滑向一側邊緣，同時淡出。

在[套用位置]加入「回拉出場」(Back Out) 退場動畫。
元素先在原地稍微縮小，再滑向一側邊緣並淡出：一個刻意的兩段式退場，而不是一次快速淡出。
等動畫結束後再移除元素，避免版面在動畫中途跳動；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即移除。

元素在淡入的同時向上移動一小段距離，彷彿落到自己的位置上。

在[套用位置]加入「上浮淡入」(Fade Up) 進場動畫，也叫 fade-in-up 或捲動顯現 (reveal on scroll)。
元素第一次捲動進入畫面時，一邊輕微上移一邊淡入：要含蓄、快速，不要有彈跳感。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。

元素像故障的霓虹燈一樣快速閃爍幾下，然後保持可見。

在[套用位置]加入「閃爍入場」(Flicker In) 進場動畫。
元素像故障的霓虹燈一樣，以不規則的間隔亮滅幾次後保持點亮：俐落的閃爍，沒有位移。
只播放一次，閃爍次數要少、速度不能太快，確保對光敏感的人也安全；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接以恆亮狀態顯示。

元素繞 Y 軸旋轉一整圈，同時稍微靠近觀看者再退回。

在[套用位置]加入「翻轉」(Flip) 動畫。
元素繞垂直軸旋轉一整圈，同時稍微靠近觀看者，然後尺寸微微一縮再回到原位：活潑但簡短。
加上透視 (perspective) 讓旋轉有縱深感，只播放一次、不要循環；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就省略旋轉。