Fade Up (上浮淡入)
別稱 Fade In Up, Reveal on Scroll
元素在淡入的同時向上移動一小段距離，彷彿落到自己的位置上。
適用情境
捲動時出現的章節標題、卡片和圖片
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「上浮淡入」(Fade Up) 進場動畫，也叫 fade-in-up 或捲動顯現 (reveal on scroll)。
元素第一次捲動進入畫面時，一邊輕微上移一邊淡入：要含蓄、快速，不要有彈跳感。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。相似的動效
A
Fade In Directional (方向淡入)
別稱 Fade In Down, Fade In Left, Fade In Right
元素從一側移動一小段距離到最終位置，同時淡入。
適用情境
載入或捲動時出現的區塊和卡片
在[套用位置]加入「方向淡入」(Fade In Directional) 進場動畫，也叫 fade in left、fade in right 或 fade in down。
元素從一側移動一小段距離到最終位置，同時淡入：快速流暢，到位時減速，不要彈跳。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。A
Slide In (滑入)
別稱 Slide In Up, Slide In Down, Slide In Left, Slide In Right
元素從容器邊緣之外滑入到停靠位置，不帶淡入效果。
適用情境
抽屜、側邊面板、橫幅
在[套用位置]加入「滑入」(Slide In) 進場動畫，也叫 slide in left、slide in right、slide in up 或 slide in down。
元素從容器邊緣之外滑到停靠位置，全程保持完全不透明：快速，平順減速，不要回彈。
在容器邊緣處裁切，避免它在外面時蓋住相鄰元素或產生捲軸；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示。Stagger (交錯動畫)
別稱 Staggered Animation, Cascade
一組元素依序以微小的時間差播放動畫，形成波浪般的效果，而不是同時出現。
適用情境
清單、網格、導覽選單和搜尋結果
在[套用位置]加入「交錯動畫」(Stagger)，也叫 staggered animation 或級聯 (cascade)。
讓各項以短而均勻的間隔依序上浮出現，整體看起來像一道快速的波浪，而不是同時出現。
即使清單很長也要讓整個過程保持簡短；捲動進入畫面時只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。A
Fade In / Fade Out (淡入/淡出)
別稱 Fade
元素在原位從完全透明變為完全不透明，離開時則反過來。
適用情境
彈出視窗、快顯通知和頁面內容的出現
在[套用位置]加入「淡入/淡出」(Fade In / Fade Out) 動畫，也叫 fade。
元素出現時在原位從完全透明變為完全可見，離開時以同樣方式淡出：柔和，不要位移或縮放。
淡出後要確保它無法再被點擊或用鍵盤聚焦；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就瞬間切換。Entrance & Exit 中的其他動效
ABCD
元素像故障的霓虹燈一樣快速閃爍幾下，然後保持可見。
適用情境
霓虹和復古風格的文字效果
在[套用位置]加入「閃爍入場」(Flicker In) 進場動畫。
元素像故障的霓虹燈一樣，以不規則的間隔亮滅幾次後保持點亮：俐落的閃爍，沒有位移。
只播放一次，閃爍次數要少、速度不能太快，確保對光敏感的人也安全；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接以恆亮狀態顯示。A
元素繞 Y 軸旋轉一整圈，同時稍微靠近觀看者再退回。
適用情境
吸引注意地展示卡片或徽章
在[套用位置]加入「翻轉」(Flip) 動畫。
元素繞垂直軸旋轉一整圈，同時稍微靠近觀看者，然後尺寸微微一縮再回到原位：活潑但簡短。
加上透視 (perspective) 讓旋轉有縱深感，只播放一次、不要循環；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就省略旋轉。A
Flip In (翻轉入場)
別稱 Flip In X, Flip In Y
元素繞水平軸或垂直軸做 3D 旋轉，從側面朝向轉為正對觀看者。
適用情境
卡片和磚塊的顯現
在[套用位置]加入「翻轉入場」(Flip In) 進場動畫，也叫 flip in X 或 flip in Y。
元素從側面朝向開始，繞水平軸旋轉到正對觀看者，略微轉過頭再回來後穩定：快速，帶一點晃動。
加上透視 (perspective) 讓旋轉有縱深感；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接以正面狀態顯示、不做動畫。