Roll In (翻滾入場)

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

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

元素從容器邊緣之外滑入到停靠位置，不帶淡入效果。

在[套用位置]加入「滑入」(Slide In) 進場動畫，也叫 slide in left、slide in right、slide in up 或 slide in down。
元素從容器邊緣之外滑到停靠位置，全程保持完全不透明：快速，平順減速，不要回彈。
在容器邊緣處裁切，避免它在外面時蓋住相鄰元素或產生捲軸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示。

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

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

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

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

元素繞一個支點旋轉，同時淡出消失。

在[套用位置]加入「旋轉出場」(Rotate Out) 退場動畫。
元素繞自身中心旋轉略多於半圈，同時淡出：流暢，逐漸加速。
旋轉結束後再移除；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。