動畫詞彙
將動作或效果的粗略描述轉換為精確術語，讓使用者知道該如何提問。
快速開始
使用者粗略描述一種效果。你傳回以下格式的匹配術語：
**Stagger** — 多個項目依次動畫，彼此之間帶有短暫延遲，形成階梯效果。
如果有多個術語可能符合，先列出最匹配的，接著 1–2 個替代方案，並附上一行關於它們差異的簡短說明。
指示
- 理解意圖，而非關鍵字。 使用者描述他們「看到」或「感覺到」的內容（「有彈性」、「滑出去」、「自己畫出來」），而不是技術名稱。將這種感覺對應到下面的詞彙表。
- 逐字引用詞彙表。 詞彙表的描述是權威的——直接使用，不要改寫。
- 區分相近術語。 當兩個術語相互競爭（Clip-path vs Mask、Pop in vs Bounce、Shared element transition vs Layout animation）時，進行對比以便使用者選擇。
- 當無法完全匹配時， 指出最接近的術語，直接說明只是近似，或者使用詞彙表的詞彙描述該效果（例如「這是一系列 scale-in 入場的 stagger」）。
- 僅使用此詞彙表。 如果這裡確實沒有某個術語，就直接說沒有，而不是憑空發明一個——儘管你可以用這些詞語來解釋概念。
- 保持簡潔。 命名問題只需要一個名稱，而不是一篇論文。先給出術語；只有在被問到時才展開說明。
範例
範例 1 — 感受型 使用者：「當一個彈窗似乎是從你點擊的按鈕中長出來，而不是從它的中心長出來，這種效果叫什麼？」 輸出：
**Origin-aware animation** — 元素從其觸發點進行動畫，例如彈窗從打開它的按鈕中長出，而不是從其自身中心（CSS 中預設行為）。
範例 2 — 區分型 使用者：「一張圖片變成另一張圖片的這種東西。」 輸出：
**Morph** — 一個形狀平滑地轉變為另一個形狀，例如動態島。
相近替代：
- **Crossfade** — 如果它們只是在同一個位置互相淡入淡出。
- **Shared element transition** — 如果一個元素從一個位置移動並變換到另一個位置。
範例 3 — 物理感覺型 使用者：「iOS 那種滾動，當你拉得太遠時會產生阻力並彈回。」 輸出：
**Rubber-banding** — 當拖動超過邊界時產生的阻力和彈回（iOS 過滾動感覺）。
詞彙表
與專案 /vocabulary 頁面一致的精選快照；當其中任一變更時，請保持兩者同步。
入場與出場 — 元素如何出現和消失
- Fade in / Fade out — 元素透過改變透明度出現或消失。
- Slide in — 元素從螢幕外滑入（左、右、上或下）。
- Scale in — 元素從小變大，經常與淡出結合。
- Pop in — 元素以輕微過衝出現，像是彈入到位。
- Reveal — 內容逐漸被揭露，通常透過剪輯路徑或遮罩的動畫。
- Enter / Exit — 元素被新增到螢幕或從螢幕移除時播放的動畫。
序列與時序 — 協調多個元素或時刻
- Keyframes — 動畫中的定義點（0%、50%、100%），瀏覽器在其中填充間格。
- Interpolation / Tween — 在起始值和結束值之間生成所有中間幀，使運動連續。
- Stagger — 多個項目依次動畫，彼此之間帶有短暫延遲，形成階梯效果。
- Orchestration — 刻意安排多個動畫的時間，使它們感覺像一個協調的運動。
- Delay — 動畫開始前的時間。
- Duration — 動畫持續時間。
- Fill mode — 元素在動畫開始前或結束後是否保留其第一幀或最後一幀的樣式（例如 forwards）。
- Stepped animation — 分成離散步驟的動畫，例如倒數計時器。
移動與變形 — 改變元素的位置、大小或角度
- Translate — 沿 X 或 Y 軸移動元素。
- Scale — 放大或縮小元素。
- Rotate — 繞點旋轉元素。
- Skew — 沿 X 或 Y 軸傾斜元素，使其脫離矩形形狀。
- 3D tilt / Flip — 在 3D 空間中旋轉（rotateX / rotateY）以增加深度。
- Perspective — 3D 效果的強度——較低的值會誇大深度，像是觀看者更近。
- Transform origin — 縮放或旋轉生長或旋轉的錨點。
- Origin-aware animation — 元素從其觸發點進行動畫，例如彈窗從打開它的按鈕中長出，而不是從其自身中心（CSS 中預設行為）。
狀態之間的轉換 — 連接一個狀態、檢視或元素到另一個
- Crossfade — 一個元素淡出，另一個元素在同一個位置淡入。
- Continuity transition — 一種變更，透過視覺連接前後，讓使用者保持方向感。例如，使同一個矩形變大變小。
- Morph — 一個形狀平滑地轉變為另一個形狀，例如動態島。
- Shared element transition — 一個元素從一個位置移動並變換到另一個位置，例如縮圖擴展成卡片。
- Layout animation — 當元素的大小或位置改變時，它會動畫到新位置而不是跳躍。
- Accordion / Collapse — 一個部分平滑地展開和折疊其高度以顯示或隱藏內容。
- Direction-aware transition — 內容向前滑動一個方向，向後滑動相反方向，使導航具有方向感。
滾動 — 與滾動或導航相關的運動
- Scroll reveal — 元素在進入視口時淡入或滑入到位。
- Scroll-driven animation — 動畫的進度直接與滾動位置相關。
- Parallax — 滾動時背景和前景以不同速度移動，創造深度感。
- Page transition — 從一個頁面或路由導航到另一個時播放的動畫。
- View transition — 瀏覽器在兩個狀態或頁面之間變形，連接共享元素。
回饋與互動 — 回應使用者操作
- Hover effect — 遊標移到元素上時的視覺變化。
- Press / Tap feedback — 點擊元素時輕微縮小，使其感覺有物理感。
- Hold to confirm — 使用者按住按鈕時填充的進度效果。
- Drag — 透過抓住元素來移動它，釋放時通常帶有慣性。
- Drag to reorder — 拖動列表中的項目重新排列，其他項目則移動騰出空間。
- Swipe to dismiss — 將元素拖離螢幕以關閉它，例如抽屜或提示。
- Rubber-banding — 當拖動超過邊界時產生的阻力和彈回（iOS 過滾動感覺）。
- Shake / Wiggle — 快速左右抖動，表示錯誤或拒絕輸入。
- Ripple — 從觸摸點擴散的圓圈，確認按壓。
緩動 — 動畫過程中速度如何變化
- Easing — 動畫加速或減速的速率。
- Ease-out — 開始快，結束慢。大多數 UI 和任何回應使用者的物件的預設值。
- Ease-in — 開始慢，結束快。通常應避免；可能感覺遲緩。
- Ease-in-out — 慢、快、慢。適合已經在螢幕上從 A 移動到 B 的元素。
- Linear — 恆定速度。避免用於 UI；保留給旋轉圖示或跑馬燈。
- Cubic-bezier — 自訂的緩動曲線，用於精確控制。
- Asymmetric easing — 加速和減速速率不同的曲線。感覺比對稱的曲線更有活力。
彈簧動畫 — 基於物理的運動，作為固定持續時間緩動的替代方案
- Spring — 由物理（張力、質量、阻尼）驅動的運動，而非固定持續時間。
- Stiffness / Tension — 彈簧拉向目標的強度。值越高感覺越乾脆。
- Damping — 彈簧穩定下來的速度。阻尼越低，彈跳和震盪越多。
- Mass — 動畫元素感覺到的重量。質量越大，運動越慢，越遲緩。
- Bounce — 過衝並穩定下來的彈簧，增加趣味性。
- Perceptual duration — 彈簧感覺上完成所需的時間，即使它仍在下面微調。
- Momentum — 攜帶速度的運動，特別是在拖動或中斷之後。
- Velocity — 元素移動的速度和方向。彈簧會將這個速度帶入下一個動畫，因此被輕彈的元素會保持其速度。
- Interruptible animation — 可以在中途平滑地重新導向的動畫，而不是先完成。
循環與環境運動 — 自行運行的動畫
- Marquee — 文字或內容連續循環滾動。
- Loop — 重複的動畫，指定次數或無限次。
- Alternate (yoyo) — 循環每次迭代先向前播放再反向播放，而不是跳回起點。
- Orbit — 一個元素繞著另一個元素沿連續路徑旋轉。
- Pulse — 溫和的縮放或透明度重複變化以引起注意。
- Float — 溫和、連續的上下漂移，使靜態元素感覺有生命且失重。
- Idle animation — 元素閒置等待互動時播放的細微運動。
打磨與效果 — 將好與卓越區分開來的小細節
- Blur — 用於柔化元素或遮蓋微小瑕疵的模糊濾鏡。
- Clip-path — 將元素裁剪成某種形狀，用於揭示、遮罩和對比滑塊。
- Mask — 使用形狀或漸層隱藏或揭示元素的一部分——類似 clip-path，但具有柔和的、可淡化的邊緣。
- Before / after slider — 可拖動的分隔線，在兩個重疊的圖像之間擦除以進行比較。
- Line drawing — SVG 路徑自行繪製，就像一支看不見的筆在追蹤它。
- Text morph — 文字改變時逐個字元動畫，引起對新值的注意。
- Skeleton / Shimmer — 在內容載入時顯示帶有移動光澤的佔位符。
- Number ticker — 數字滾動或計數到某個值。
- Tabular numbers — 固定寬度的數字，使數字在變化時不會移動。對計數器、計時器和計數器至關重要。
- Typewriter — 文字一次一個字元出現，像在打字。
效能 — 保持運動流暢而非卡頓的關鍵
- Frame rate (FPS) — 每秒繪製的幀數。60fps 是流暢運動的基準；在較新的顯示器上為 120fps。
- Jank — 瀏覽器因無法跟上動畫而丟幀時出現的可見卡頓。
- Dropped frame — 瀏覽器錯過了繪製截止時間的幀，導致運動中出現微小停頓。
- Compositing — 讓 GPU 在其自己的圖層上移動或淡出元素，而無需重新進行佈局或繪製。
- will-change — 一個 CSS 提示，表示元素即將進行動畫，因此瀏覽器可以提前將其提升到自己的圖層。
- Layout thrashing — 對 width、height、top 或 left 等屬性進行動畫，迫使瀏覽器每幀重新計算佈局，導致卡頓。
需要了解的原則 — 指導何時以及如何進行動畫的概念
- Purposeful animation — 運動應服務於某種功能——引導、提供回饋、顯示關係——而不僅僅是裝飾。
- Anticipation — 在移動之前向相反方向小幅預備，暗示即將發生的事情。
- Follow-through — 元素的部分在主運動停止後繼續移動並略微穩定，增加重量感。
- Squash & stretch — 在運動過程中使元素變形，以傳達重量、速度和靈活性。
- Perceived performance — 正確的動畫使介面感覺更快，即使實際上並沒有。
- Frequency of use — 使用者看到一個動畫的頻率越高，它應該越短且越微妙。
- Spatial consistency — 讓元素在狀態之間保持其身份和位置，以便使用者永遠不會失去對事物去向的追蹤。
- Hardware acceleration — 對 transform 和 opacity 進行動畫可讓 GPU 保持運動流暢。
- Reduced motion — 尊重使用者的 prefers-reduced-motion 設定，降低或移除運動。