Slide In (滑入)

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

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

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

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

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

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

側邊面板從左、右或頂部邊緣滑入，推開或覆蓋頁面內容。

在[套用位置]加入「抽屜滑動」(Drawer Slide)，也叫畫布外選單 (off-canvas) 或側邊面板 (side sheet)。
面板從側邊滑入並覆蓋在內容上方，同時後方頁面變暗，速度快、平順減速；關閉時用同樣的方式滑出。
抽屜開啟時把鍵盤焦點留在裡面，可以用 Escape 鍵或點擊變暗區域關閉，關閉後把焦點還給開啟它的按鈕。

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

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

一組元素依序以微小的時間差播放動畫，形成波浪般的效果，而不是同時出現。

在[套用位置]加入「交錯動畫」(Stagger)，也叫 staggered animation 或級聯 (cascade)。
讓各項以短而均勻的間隔依序上浮出現，整體看起來像一道快速的波浪，而不是同時出現。
即使清單很長也要讓整個過程保持簡短；捲動進入畫面時只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。

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

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