Preloader Curtain Lift (載入布幕升起)
別稱 Splash screen, Intro loader
帶有 Logo 或計數器的全螢幕開場層滑走或淡出，露出網站。
適用情境
網站首次載入
變體
- slide-up
- fade
- counter then reveal
提示詞
將 [套用位置] 替換成你要套用的位置，再貼給 AI 代理。提示詞中包含動效名稱，下次只要說出名稱就能提出需求。
在[套用位置]加入「載入布幕升起」(Preloader Curtain Lift)，也叫 splash screen 或 intro loader。
全螢幕開場層在載入條填滿期間保持不動，接著平順地向上滑走，露出下方輕柔就定位的網站。
只在首次載入時播放，停留時間絕不能超過實際載入所需；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就直接略過。相似的動效
A
B
點擊試試
Curtain / Panel Wipe (布幕擦除轉場)
別稱 Page wipe, Curtain reveal, Stripe transition, Staggered panels
實色面板掃過螢幕遮住舊頁面，隨後收回，露出新頁面。
適用情境
作品集和設計公司網站的頁面切換
在[套用位置]加入「布幕擦除轉場」(Curtain / Panel Wipe) 頁面轉場，也叫 page wipe 或 staggered panels。
實色面板依序掃入，遮住舊頁面；頁面在完全被遮住時切換，接著面板繼續移出畫面，露出新頁面：大膽而流暢。
面板遮住舊頁面之前絕不能露出新頁面；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就改用單純的淡入淡出。- %
Number Ticker (數字遞增)
別稱 Count Up, Animated Counter, Number Counter, countUp
數字出現在畫面上時，從起始值計數到目標值。
適用情境
統計數據、KPI 區塊
在[套用位置]加入「數字遞增」(Number Ticker)，也叫 count up 或 animated counter。
數字進入畫面時，從零計數到目標值，一開始快，接近終點時柔和地放慢。
使用等寬數字，避免周圍內容抖動；只計數一次；對螢幕閱讀器以及開啟了「減少動態效果」(prefers-reduced-motion) 的使用者，直接顯示最終數值。A
Slide Out (滑出)
別稱 Slide Out Up, Slide Out Down
元素滑出容器邊緣後消失。
適用情境
關閉抽屜和面板
在[套用位置]加入「滑出」(Slide Out) 退場動畫，也叫 slide out up 或 slide out down。
元素保持完全不透明，滑出容器邊緣後消失：快速，離開時加速。
在容器邊緣處裁切，離開畫面後對鍵盤和螢幕閱讀器也隱藏；如果使用者開啟了「減少動態效果」(prefers-reduced-motion)，就立即隱藏。Page Transition 中的其他動效
A
B
點擊試試
Shared Axis (共享軸轉場)
別稱 Shared axis X/Y/Z
舊內容和新內容沿 X、Y 或 Z 軸一起移動並伴隨淡入淡出，以表現空間關係。
適用情境
分步流程、同層導覽、逐層深入
在[套用位置]加入「共享軸轉場」(Shared Axis) 頁面轉場，也叫 shared axis X/Y/Z。
前進時，舊內容向一側滑動一小段並快速淡出，新內容從另一側滑入並緊接著淡入；返回時方向相反。
位移要短，只需暗示方向；軸向要與導覽對應：同層用橫向，分步用縱向，逐層深入用縱深方向。BC
A
點擊試試
Shared Element Transition (共享元素轉場)
別稱 Hero transition, View Transition shared element, view-transition-name morph
對應的元素（例如縮圖）在頁面之間變換位置和大小。
適用情境
從縮圖進入詳細頁
在[套用位置]加入「共享元素轉場」(Shared Element Transition)，也叫 hero transition 或 view-transition-name morph。
進入下一頁時，對應的元素（例如縮圖）平順地移動並放大到新頁面上的位置，其餘內容交叉淡化；返回時再縮回去。
給兩個頁面上對應的元素同一個共享識別，確保正確配對；瀏覽器無法變換時，退回為單純的交叉淡化。A
B
點擊試試
Slide Page Transition (滑動轉場)
別稱 Push / pop, Directional slide, Slide-over route
新頁面從一側滑入，舊頁面同時滑出，方向跟隨導覽層級。
適用情境
行動 App 風格的前進/返回導覽
在[套用位置]加入「滑動轉場」(Slide Page Transition)，也叫 push / pop 或 directional slide。
前進時，新頁面從側邊推入，舊頁面從另一側滑出；返回時兩者反向移動：平順，起止都要和緩。
方向要與導覽層級對應，包括瀏覽器的上一頁按鈕；滑動過程中頁面不能出現橫向捲動。