Tracking In (字距入場)
別稱 Text Tracking In, Letter-spacing In
字母起初間距很寬且較淡，接著在顯現的同時收攏到正常字距。
適用情境
標題文字進場
變體
- expand
- contract
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「字距入場」(Tracking In) 文字動畫，也叫 text tracking in 或 letter-spacing in。
字母起初間距很寬且較淡，接著逐漸收攏到正常字距並完全顯現：流暢，結尾減速。
字距變化期間讓文字保持置中且不換行，避免周圍版面位移；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接以正常字距顯示。相似的動效
ABCD
Blur In (模糊入場)
別稱 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
元素從嚴重模糊的狀態逐漸變清晰，常伴隨滑入或淡入。
適用情境
標題和首頁主視覺文字的顯現
在[套用位置]加入「模糊入場」(Blur In) 進場動畫，也叫 text focus in、focus in 或 blur text reveal。
內容從嚴重模糊且透明的狀態開始，在原地逐漸變清晰：柔和、偏慢，沒有位移。
只播放一次；如果使用者開啟了「減少動態效果」(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)，就直接顯示、不做動畫。ABCDEF
將滑鼠移到上面
Letter Scatter (字母飛散)
別稱 Explosive Letter Burst, Scatter Gather Letters
滑鼠懸停時字母四散飛開再歸位，或在進場時向外迸散。
適用情境
俏皮的連結
在[套用位置]加入「字母飛散」(Letter Scatter) 滑鼠懸停效果，也叫 scatter gather letters 或 explosive letter burst。
游標移到文字上時，每個字母帶著一點旋轉朝各自方向飛出一小段；游標移開後再流暢地聚回原來的單字。
字母移動時，單字在版面中佔的位置保持不變，螢幕報讀器要把它當成一個字來讀；鍵盤聚焦時也顯示同樣的效果。ABCDEF
將滑鼠移到上面
Variable Font Weight Animation (可變字重動畫)
別稱 Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover
藉由可變字型的軸，字母平順地變粗或變細（或改變寬度、傾斜度）。
適用情境
互動式標題
在[套用位置]加入「可變字重動畫」(Variable Font Weight Animation) 懸停效果，也叫字重切換 (font weight shift)。
游標停在文字上時，字母從左到右依序變粗，形成一道流暢的波浪；游標移開後再變細。
使用可變字型，讓字重平順變化而不是跳變；標題變寬時不要推擠附近內容，並且在鍵盤焦點時呈現同樣的效果。Entrance & Exit 中的其他動效
A
Zoom In (縮放入場)
別稱 Scale In, Zoom In Up, Zoom In Down
元素從小而透明的狀態放大到完整尺寸，同時淡入。
適用情境
對話框、圖片燈箱、彈出視窗
在[套用位置]加入「縮放入場」(Zoom In) 進場動畫，也叫 scale in。
元素從小而透明放大到完整尺寸，同時淡入：快速、流暢，不要放大過頭再縮回。
以中心為基準縮放，不影響周圍版面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。A
Zoom Out (縮放出場)
別稱 Scale Out
元素縮小並淡出，直到消失。
適用情境
關閉對話框和移除項目
在[套用位置]加入「縮放出場」(Zoom Out) 退場動畫，也叫 scale out。
元素朝中心縮小並淡出，直到消失：快速，逐漸加速。
完全消失後再從版面和鍵盤焦點中移除；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。A
Back In (回拉入場)
別稱 Back In Up, Back In Down
元素從縮小且偏移的狀態開始，滑入後放大到完整尺寸。
適用情境
首頁主視覺元素和卡片
在[套用位置]加入「回拉入場」(Back In) 進場動畫，也叫 back in up 或 back in down。
元素以縮小且略微透明的狀態從邊緣外進來，到達位置後再放大到完整尺寸：一個刻意的兩段式動作，而不是快速彈出。
只播放一次；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接在原位顯示、不做動畫。