Bounce In (彈跳入場)

元素從縮小且偏移的狀態開始，滑入後放大到完整尺寸。

在[套用位置]加入「回拉入場」(Back In) 進場動畫，也叫 back in up 或 back in down。
元素以縮小且略微透明的狀態從邊緣外進來，到達位置後再放大到完整尺寸：一個刻意的兩段式動作，而不是快速彈出。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

元素從縮小且傾斜的狀態彈出，略微超出後穩定下來，就像驚奇箱裡的彈簧小丑。

在[套用位置]加入「玩偶盒彈出」(Jack In The Box) 進場動畫。
元素以底邊為支點，從很小且傾斜的狀態彈出，越過直立位置左右搖擺，然後穩定下來：有彈性、俏皮。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

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

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

懸停開始或結束時，元素帶著彈性過衝進行縮放。

在[套用位置]加入「彈性縮放」(Bounce Scale) 懸停效果，也叫彈入/彈出 (bounce in / out)。
元素帶著明顯的彈性稍微放大，短暫超過最終尺寸後再回穩；游標移開時以同樣的彈性縮回。
不要讓周圍的版面產生位移，鍵盤焦點時也呈現同樣的效果。

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

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

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

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

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

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