Swirl In (迴旋入場)

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

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

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

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

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

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

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

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

字母起初間距很寬且較淡，接著在顯現的同時收攏到正常字距。

在[套用位置]加入「字距入場」(Tracking In) 文字動畫，也叫 text tracking in 或 letter-spacing in。
字母起初間距很寬且較淡，接著逐漸收攏到正常字距並完全顯現：流暢，結尾減速。
字距變化期間讓文字保持置中且不換行，避免周圍版面位移；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接以正常字距顯示。

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

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