Jack In The Box (玩偶盒彈出)

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

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

元素從一個點旋轉放大，同時淡入。

在[套用位置]加入「迴旋入場」(Swirl In) 進場動畫，也叫 swirl in forward。
元素從一個點放大到完整尺寸，同時旋轉遠超過一整圈並淡入：一開始很快，落定時逐漸減速。
只對單一元素播放一次，不要套用在整組元素上；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

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

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

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

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

元素帶著傾斜從側面疾速衝入，落定時恢復端正。

在[套用位置]加入「光速入場」(Light Speed In) 進場動畫，也叫 lightspeed in。
元素像高速飛馳般傾斜著從側面疾速衝入，傾斜先反向過頭一次，落定時恢復端正：快速且具戲劇性，結尾減速。
元素還在畫面外時不要產生水平捲軸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。

元素傾斜著向側面疾速離開，同時淡出。

在[套用位置]加入「光速出場」(Light Speed Out) 退場動畫，也叫 lightspeed out。
元素傾斜著向側面疾速離開，同時淡出：要快，離開時逐漸加速。
越過邊緣時不要產生水平捲軸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。

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

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