Stagger (交錯動畫)
別稱 Staggered Animation, Cascade
一組元素依序以微小的時間差播放動畫，形成波浪般的效果，而不是同時出現。
適用情境
清單、網格、導覽選單和搜尋結果
變體
- from start
- from center
- from end
- grid
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「交錯動畫」(Stagger)，也叫 staggered animation 或級聯 (cascade)。
讓各項以短而均勻的間隔依序上浮出現，整體看起來像一道快速的波浪，而不是同時出現。
即使清單很長也要讓整個過程保持簡短；捲動進入畫面時只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。相似的動效
ABCDEF
Split Text Stagger (文字拆分交錯)
別稱 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
標題被拆分成字元、單字或行，以短暫延遲依序動畫進場。
適用情境
大標題、章節標題
在[套用位置]加入「文字拆分交錯」(Split Text Stagger) 進場效果，也叫逐字交錯 (letter stagger) 或 staggered text reveal。
把標題拆成單個字母，字母之間留出短暫延遲，依序上移並淡入，快速流暢，不要有彈跳感。
標題進入畫面時只播放一次，讓螢幕閱讀器把它當作一個完整的詞讀出；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。- A
- B
- C
- D
點擊試試
List Item Enter/Exit (清單項目進出場)
別稱 AnimatePresence, TransitionGroup, Animated list
清單項目新增時淡入並滑入，刪除時以動畫退場，相鄰項目隨之補上空位。
適用情境
待辦清單、通知、購物車商品
在[套用位置]加入「清單項目進出場」(List Item Enter/Exit) 動畫，也叫動畫清單 (animated list)。
新項目先撐開自己的空間，再淡入並滑入；被刪除的項目先淡出，再收合高度，讓相鄰項目平順地補上空位。
被刪除的項目要等退場動畫結束後才移除，這樣新增或刪除項目時清單才不會跳動。Fade Up (上浮淡入)
別稱 Fade In Up, Reveal on Scroll
元素在淡入的同時向上移動一小段距離，彷彿落到自己的位置上。
適用情境
捲動時出現的章節標題、卡片和圖片
在[套用位置]加入「上浮淡入」(Fade Up) 進場動畫，也叫 fade-in-up 或捲動顯現 (reveal on scroll)。
元素第一次捲動進入畫面時，一邊輕微上移一邊淡入：要含蓄、快速，不要有彈跳感。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示、不做動畫。在裡面捲動
Scroll-Triggered Animation (捲動觸發動畫)
別稱 Reveal on Scroll, Scroll Reveal, Animate on Scroll, Scroll Fade-In, Toggle Class on Scroll, Scroll Toggle Actions
元素進入或離開可視區域時，動畫播放一次。
適用情境
淡入區塊、延遲顯現
在[套用位置]加入「捲動觸發動畫」(Scroll-Triggered Animation)，也叫捲動顯現 (reveal on scroll) 或 animate on scroll。
每個元素進入畫面時只播放一次：淡入並往上滑到定位，用自己快速流暢的節奏播放，而不是跟著捲動位置。
腳本載入失敗時內容也要看得到；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接顯示元素。Entrance & Exit 中的其他動效
A
Swirl In (迴旋入場)
別稱 Swirl In Forward
元素從一個點旋轉放大，同時淡入。
適用情境
裝飾元素或 Logo 進場
在[套用位置]加入「迴旋入場」(Swirl In) 進場動畫，也叫 swirl in forward。
元素從一個點放大到完整尺寸，同時旋轉遠超過一整圈並淡入：一開始很快，落定時逐漸減速。
只對單一元素播放一次，不要套用在整組元素上；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。ABCD
Tracking In (字距入場)
別稱 Text Tracking In, Letter-spacing In
字母起初間距很寬且較淡，接著在顯現的同時收攏到正常字距。
適用情境
標題文字進場
在[套用位置]加入「字距入場」(Tracking In) 文字動畫，也叫 text tracking in 或 letter-spacing in。
字母起初間距很寬且較淡，接著逐漸收攏到正常字距並完全顯現：流暢，結尾減速。
字距變化期間讓文字保持置中且不換行，避免周圍版面位移；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接以正常字距顯示。A
Zoom In (縮放入場)
別稱 Scale In, Zoom In Up, Zoom In Down
元素從小而透明的狀態放大到完整尺寸，同時淡入。
適用情境
對話框、圖片燈箱、彈出視窗
在[套用位置]加入「縮放入場」(Zoom In) 進場動畫，也叫 scale in。
元素從小而透明放大到完整尺寸，同時淡入：快速、流暢，不要放大過頭再縮回。
以中心為基準縮放，不影響周圍版面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。