Back to Details

animation-vocabulary

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Animation Vocabulary

动画术语表

Turn a vague description of a motion or effect into the precise term, so the user knows what to ask for.
将动效的模糊描述转换为精准术语，让用户知道该如何提问。

Quick Start

快速开始

The user describes an effect loosely. You return the matching term(s) in this format:
**Stagger** — Animate several items one after another with a small delay between each, creating a cascade.
If several terms could fit, list the best match first, then 1–2 alternates with a one-line note on how they differ.
用户粗略描述一种效果，你需按以下格式返回匹配的术语：
**Stagger** — 依次为多个元素添加动画，每个元素之间有短暂延迟，形成瀑布流效果。
如果有多个术语符合，先列出最匹配的，再列出1-2个替代选项，并附上一行说明解释它们的区别。

Instructions

使用说明

  1. Read for intent, not keywords. Users describe what they see or feel ("springy", "slides off", "draws itself in"), not the technical name. Map the sensation to the glossary below.
  2. Quote the glossary verbatim. Its descriptions are authoritative — use them as-is, don't paraphrase.
  3. Disambiguate close terms. When two compete (Clip-path vs Mask, Pop in vs Bounce, Shared element transition vs Layout animation), contrast them so the user can pick.
  4. When nothing matches exactly, name the closest term and say plainly it's an approximation, or describe the effect in the glossary's vocabulary (e.g. "that's a stagger of scale-in entrances").
  5. Stay within this glossary. If a term genuinely isn't here, say so rather than inventing one — though you may explain the concept using these words.
  6. Keep it tight. A naming question wants a name, not an essay. Lead with the term; expand only if asked.
  1. 理解意图而非关键词：用户描述的是他们看到或感受到的效果（如“有弹性的”“滑出”“逐渐显现”），而非技术名称。将这种感受对应到下方的术语表中。
  2. 严格引用术语表内容：术语表的描述具有权威性——直接使用原文，不要改写。
  3. 区分相近术语：当两个术语存在竞争关系时（如Clip-path vs Mask、Pop in vs Bounce、Shared element transition vs Layout animation），对比它们的差异，方便用户选择。
  4. 无完全匹配项时：给出最接近的术语，并明确说明这是近似匹配，或者用术语表中的词汇描述该效果（例如“这是scale-in入场动画的stagger效果”）。
  5. 限定在本术语表范围内：如果某个术语确实不在本表中，直接说明，不要自行创造——不过你可以用本表中的词汇解释相关概念。
  6. 保持简洁：用户询问名称时只需要名称，不需要长篇大论。先给出术语，仅在被追问时再展开说明。

Examples

示例

Example 1 — feel-based User: "What's it called when a popover seems to grow out of the button you clicked instead of from its middle?" Output:
**Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.
Example 2 — disambiguation User: "The thing where one image turns into another image." Output:
**Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island.

Close alternates:
- **Crossfade** — if they simply fade over each other in the same spot.
- **Shared element transition** — if an element travels and transforms from one position into another.
Example 3 — physics feel User: "That iOS scroll where it resists and snaps back when you pull too far." Output:
**Rubber-banding** — Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).
示例1 — 基于感受的描述 用户：“弹出框不是从自身中心，而是从点击的按钮里展开，这种效果叫什么？” 输出：
**Origin-aware animation** — 元素从触发它的组件中展开动画，比如弹出框从打开它的按钮中生长出来，而非CSS默认的从自身中心展开。
示例2 — 术语区分 用户：“一张图片变成另一张图片的效果。” 输出：
**Morph** — 一个形状平滑地转变为另一个形状，例如Dynamic Island（灵动岛）效果。

相近替代选项：
- **Crossfade** — 如果两张图片只是在同一位置互相淡入淡出。
- **Shared element transition** — 如果一个元素从一个位置移动并变形到另一个位置。
示例3 — 物理感受描述 用户：“iOS那种滚动时拉过头会有阻力然后弹回去的效果。” 输出：
**Rubber-banding** — 拖拽超出边界时产生的阻力和回弹效果（iOS滚动过度时的触感）。

Glossary

术语表

A curated snapshot mirroring the project's 
/vocabulary
page; keep the two in sync when either changes.
精选快照，与项目的
/vocabulary
页面同步；任何一方更新时需保持两者一致。

Entrances & Exits — how elements appear and disappear

入场与退场动画 — 元素的出现与消失方式

  • Fade in / Fade out — Element appears or disappears by changing opacity.
  • Slide in — Element enters by sliding in from off-screen (left, right, top, or bottom).
  • Scale in — Element grows from smaller to full size as it appears, often paired with a fade.
  • Pop in — Element appears with a slight overshoot, like it bounces into place.
  • Reveal — Content is uncovered gradually, often by animating a clip-path or mask.
  • Enter / Exit — The animation an element plays when it's added to or removed from the screen.
  • Fade in / Fade out — 元素通过改变透明度实现出现或消失。
  • Slide in — 元素从屏幕外（左、右、上、下）滑入。
  • Scale in — 元素从较小尺寸放大至完整尺寸，通常配合淡入效果。
  • Pop in — 元素出现时略有过冲，仿佛弹入到位。
  • Reveal — 内容逐渐被显示出来，通常通过动画clip-path或mask实现。
  • Enter / Exit — 元素被添加到屏幕或从屏幕移除时播放的动画。

Sequencing & Timing — coordinating multiple elements or moments

序列与计时 — 协调多个元素或动画时刻

  • Keyframes — Defined points in an animation (0%, 50%, 100%) that the browser fills the gaps between.
  • Interpolation / Tween — Generating all the in-between frames between a start and end value, so motion is continuous.
  • Stagger — Animate several items one after another with a small delay between each, creating a cascade.
  • Orchestration — Deliberately timing multiple animations so they feel like one coordinated motion.
  • Delay — Time before an animation starts.
  • Duration — How long an animation takes.
  • Fill mode — Whether an element keeps its first or last frame's styles before the animation starts or after it ends (e.g. forwards).
  • Stepped animation — An animation that is divided into discrete steps, like a countdown timer.
  • Keyframes — 动画中的定义点（0%、50%、100%），浏览器会自动填充这些点之间的过渡帧。
  • Interpolation / Tween — 在起始值和结束值之间生成所有过渡帧，使运动保持连续。
  • Stagger — 依次为多个元素添加动画，每个元素之间有短暂延迟，形成瀑布流效果。
  • Orchestration — 刻意为多个动画设置时间，让它们看起来像是一个协调的整体运动。
  • Delay — 动画开始前的等待时间。
  • Duration — 动画持续的时长。
  • Fill mode — 元素在动画开始前或结束后是否保持第一帧或最后一帧的样式（例如forwards）。
  • Stepped animation — 被划分为离散步骤的动画，比如倒计时器。

Movement & Transforms — changing an element's position, size, or angle

移动与变形 — 改变元素的位置、尺寸或角度

  • Translate — Move an element along the X or Y axis.
  • Scale — Make an element bigger or smaller.
  • Rotate — Spin an element around a point.
  • Skew — Slant an element along the X or Y axis, shearing it out of its rectangular shape.
  • 3D tilt / Flip — Rotate in 3D space (rotateX / rotateY) to add depth.
  • Perspective — How strong the 3D effect looks — a lower value exaggerates depth, like the viewer is closer.
  • Transform origin — The anchor point a scale or rotation grows or spins from.
  • Origin-aware animation — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.
  • Translate — 沿X轴或Y轴移动元素。
  • Scale — 放大或缩小元素。
  • Rotate — 围绕一个点旋转元素。
  • Skew — 沿X轴或Y轴倾斜元素，使其偏离矩形形状。
  • 3D tilt / Flip — 在3D空间中旋转（rotateX / rotateY）以增加深度感。
  • Perspective — 3D效果的强度——值越低，深度感越夸张，仿佛观察者离得更近。
  • Transform origin — 缩放或旋转时的锚点，元素围绕该点进行缩放或旋转。
  • Origin-aware animation — 元素从触发它的组件中展开动画，比如弹出框从打开它的按钮中生长出来，而非CSS默认的从自身中心展开。

Transitions Between States — connecting one state, view, or element to another

状态过渡 — 连接不同状态、视图或元素

  • Crossfade — One element fades out as another fades in, in the same spot.
  • Continuity transition — A change that keeps the user oriented by visually connecting before and after. For example, making the same rectangle bigger and smaller.
  • Morph — One shape smoothly turns into another shape, e.g. Dynamic Island.
  • Shared element transition — An element travels and transforms from one position into another, like a thumbnail expanding into a card.
  • Layout animation — When an element's size or position changes, it animates to the new spot instead of snapping.
  • Accordion / Collapse — A section smoothly expands and collapses its height to show or hide content.
  • Direction-aware transition — Content slides one way going forward and the opposite way going back, so navigation has a sense of direction.
  • Crossfade — 一个元素淡出的同时另一个元素淡入，两者处于同一位置。
  • Continuity transition — 通过视觉连接前后状态来保持用户方向感的变化。例如，让同一个矩形放大或缩小。
  • Morph — 一个形状平滑地转变为另一个形状，例如Dynamic Island（灵动岛）效果。
  • Shared element transition — 元素从一个位置移动并变形到另一个位置，比如缩略图展开为卡片。
  • Layout animation — 元素的尺寸或位置改变时，会平滑动画到新位置，而非突然跳转。
  • Accordion / Collapse — 一个区域平滑地展开或收起高度，以显示或隐藏内容。
  • Direction-aware transition — 前进时内容向一个方向滑动，后退时向相反方向滑动，让导航具有方向感。

Scroll — motion tied to scrolling or navigating between views

滚动相关 — 与滚动或视图导航绑定的动效

  • Scroll reveal — Elements fade or slide into place as they enter the viewport.
  • Scroll-driven animation — An animation whose progress is tied directly to scroll position.
  • Parallax — Background and foreground move at different speeds while scrolling, creating depth.
  • Page transition — An animation that plays when navigating from one page or route to another.
  • View transition — The browser morphs between two states or pages, connecting shared elements.
  • Scroll reveal — 元素进入视口时淡入或滑入到位。
  • Scroll-driven animation — 动画进度直接与滚动位置绑定。
  • Parallax — 滚动时背景和前景以不同速度移动，营造深度感。
  • Page transition — 在页面或路由之间导航时播放的动画。
  • View transition — 浏览器在两个状态或页面之间进行形态转换，连接共享元素。

Feedback & Interaction — responding to the user's actions

反馈与交互 — 响应用户操作

  • Hover effect — Visual change when the cursor moves over an element.
  • Press / Tap feedback — A subtle scale-down when an element is clicked, so it feels physical.
  • Hold to confirm — A progress effect that fills up while the user holds a button.
  • Drag — Moving an element by grabbing it, often with momentum when released.
  • Drag to reorder — Dragging items in a list to rearrange them, while the others shift to make room.
  • Swipe to dismiss — Dragging an element off-screen to close it, like a drawer or toast.
  • Rubber-banding — Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).
  • Shake / Wiggle — A quick side-to-side jitter signaling an error or rejected input.
  • Ripple — A circle expanding from the point of a tap, confirming the press.
  • Hover effect — 光标移到元素上时产生的视觉变化。
  • Press / Tap feedback — 元素被点击时轻微缩小，带来物理触感。
  • Hold to confirm — 用户按住按钮时填充的进度效果。
  • Drag — 通过拖拽移动元素，释放时通常带有动量。
  • Drag to reorder — 拖拽列表中的项重新排序，其他项会移动腾出空间。
  • Swipe to dismiss — 将元素拖拽出屏幕以关闭它，比如抽屉或提示框。
  • Rubber-banding — 拖拽超出边界时产生的阻力和回弹效果（iOS滚动过度时的触感）。
  • Shake / Wiggle — 快速左右抖动，用于提示错误或输入被拒绝。
  • Ripple — 从点击点向外扩散的圆圈，确认操作已被触发。

Easing — how speed changes over an animation

缓动 — 动画速度的变化方式

  • Easing — The rate at which an animation speeds up or slows down.
  • Ease-out — Starts fast, ends slow. The default for most UI and anything responding to the user.
  • Ease-in — Starts slow, ends fast. Usually avoided; can feel sluggish.
  • Ease-in-out — Slow, fast, slow. Good for elements already on screen moving from A to B.
  • Linear — Constant speed. Avoid for UI; reserve for spinners or marquees.
  • Cubic-bezier — A custom easing curve you define for precise control.
  • Asymmetric easing — A curve that accelerates and decelerates at different rates. Feels more alive than a symmetric one.
  • Easing — 动画加速或减速的速率。
  • Ease-out — 开始快，结束慢。是大多数UI和用户响应类动画的默认选项。
  • Ease-in — 开始慢，结束快。通常应避免，会显得迟缓。
  • Ease-in-out — 慢、快、慢。适用于屏幕上已存在的元素从A点移动到B点的场景。
  • Linear — 匀速。UI中应避免使用；仅用于加载 spinner 或跑马灯。
  • Cubic-bezier — 可自定义的缓动曲线，用于精确控制动画节奏。
  • Asymmetric easing — 加速和减速速率不同的曲线。比对称曲线更具生动感。

Spring Animations — physics-based motion as an alternative to fixed-duration easing

弹簧动画 — 基于物理的动效，替代固定时长的缓动

  • Spring — Motion driven by physics (tension, mass, damping) rather than a set duration.
  • Stiffness / Tension — How strongly the spring pulls toward its target. Higher feels snappier.
  • Damping — How quickly a spring settles. Lower damping means more bounce and oscillation.
  • Mass — How heavy the animated element feels. More mass makes it slower and more sluggish.
  • Bounce — A spring that overshoots and settles, adding playfulness.
  • Perceptual duration — How long a spring feels finished, even though it keeps micro-settling underneath.
  • Momentum — Motion that carries velocity, especially after a drag or interruption.
  • Velocity — How fast and in which direction an element is moving. A spring carries it into the next animation when interrupted, so a flicked element keeps its speed.
  • Interruptible animation — An animation that can be smoothly redirected mid-flight instead of finishing first.
  • Spring — 由物理参数（张力、质量、阻尼）驱动的运动，而非固定时长。
  • Stiffness / Tension — 弹簧拉向目标的力度。值越高，触感越灵敏。
  • Damping — 弹簧稳定下来的速度。阻尼越低，弹跳和振荡越多。
  • Mass — 动画元素的重量感。质量越大，运动越缓慢迟缓。
  • Bounce — 会过冲然后稳定的弹簧效果，增添趣味性。
  • Perceptual duration — 弹簧动画看起来完成的时长，即使底层仍在微小调整。
  • Momentum — 带有速度的运动，尤其是拖拽或中断后。
  • Velocity — 元素移动的速度和方向。弹簧动画在被中断时会将速度带入下一个动画，因此轻弹的元素会保持速度。
  • Interruptible animation — 可在运行中平滑重定向的动画，无需先完成当前动画。

Looping & Ambient Motion — animations that run on their own

循环与环境动效 — 自动运行的动画

  • Marquee — Text or content that scrolls continuously in a loop.
  • Loop — An animation that repeats, a set number of times or infinitely.
  • Alternate (yoyo) — A loop that plays forward then reverses each iteration, instead of jumping back to the start.
  • Orbit — An element circling around another in a continuous path.
  • Pulse — A gentle repeating scale or opacity change to draw attention.
  • Float — A gentle, continuous up-and-down drift that makes a static element feel alive and weightless.
  • Idle animation — Subtle motion that plays while an element is just sitting there, waiting to be interacted with.
  • Marquee — 文本或内容持续循环滚动。
  • Loop — 重复播放的动画，可设置重复次数或无限循环。
  • Alternate (yoyo) — 每次循环先正向播放再反向播放，而非跳回起始点。
  • Orbit — 元素围绕另一个元素沿连续路径旋转。
  • Pulse — 轻柔重复的缩放或透明度变化，用于吸引注意力。
  • Float — 轻柔持续的上下漂移，让静态元素显得生动且无重量感。
  • Idle animation — 元素处于等待交互状态时播放的细微动效。

Polish & Effects — the small touches that separate good from great

润色与特效 — 区分优秀与卓越的细节

  • Blur — A blur filter used to soften an element or mask tiny imperfections.
  • Clip-path — Clipping an element to a shape, used for reveals, masks, and before/after sliders.
  • Mask — Hiding or revealing parts of an element using a shape or gradient — like clip-path, but with soft, fadeable edges.
  • Before / after slider — A draggable divider that wipes between two overlaid images to compare them.
  • Line drawing — An SVG path that draws itself in, like an invisible pen tracing it.
  • Text morph — Text that animates character by character when it changes, drawing attention to the new value.
  • Skeleton / Shimmer — A placeholder with a moving sheen shown while content loads.
  • Number ticker — Digits rolling or counting up to a value.
  • Tabular numbers — Fixed-width digits so numbers don't shift around as they change. Essential for tickers, timers, and counters.
  • Typewriter — Text appearing one character at a time, as if being typed.
  • Blur — 模糊滤镜，用于柔化元素或掩盖微小瑕疵。
  • Clip-path — 将元素裁剪为特定形状，用于显示/隐藏效果、蒙版和前后对比滑块。
  • Mask — 使用形状或渐变隐藏或显示元素的部分区域——类似clip-path，但边缘可柔化、渐变。
  • Before / after slider — 可拖拽的分隔条，在两张重叠图片之间切换以进行对比。
  • Line drawing — SVG路径逐渐绘制出来，仿佛有一支隐形的笔在描摹。
  • Text morph — 文本变化时逐字符动画，吸引用户注意新内容。
  • Skeleton / Shimmer — 内容加载时显示的带有流动光泽的占位符。
  • Number ticker — 数字滚动或计数到目标值。
  • Tabular numbers — 固定宽度的数字，避免数字变化时位置偏移。是计数器、计时器和数字滚动效果的必备设置。
  • Typewriter — 文本逐字符显示，仿佛正在被打字输入。

Performance — what keeps motion smooth instead of stuttering

性能 — 保持动效流畅不卡顿

  • Frame rate (FPS) — Frames drawn per second. 60fps is the baseline for smooth motion; 120fps on newer displays.
  • Jank — Visible stutter when the browser drops frames because it can't keep up with the animation.
  • Dropped frame — A frame the browser missed its deadline to draw, causing a tiny hitch in motion.
  • Compositing — Letting the GPU move or fade an element on its own layer without redoing layout or paint.
  • will-change — A CSS hint that an element is about to animate, so the browser can promote it to its own layer ahead of time.
  • Layout thrashing — Animating properties like width, height, top, or left that force the browser to recalculate layout every frame, causing jank.
  • Frame rate (FPS) — 每秒绘制的帧数。60fps是流畅动效的基准；新显示器可达120fps。
  • Jank — 浏览器因无法跟上动画节奏而丢帧，导致可见的卡顿。
  • Dropped frame — 浏览器错过绘制截止时间的帧，导致动效出现微小卡顿。
  • Compositing — 让GPU在独立图层上移动或淡入淡出元素，无需重新计算布局或重绘。
  • will-change — CSS提示，告知浏览器元素即将进行动画，以便提前将其提升到独立图层。
  • Layout thrashing — 动画width、height、top或left等属性，会迫使浏览器每帧都重新计算布局，导致卡顿。

Principles to Know — concepts that guide when and how to animate

需了解的原则 — 指导动画何时及如何使用的概念

  • Purposeful animation — Motion should serve a function — orient, give feedback, show relationships — not just decorate.
  • Anticipation — A small wind-up in the opposite direction before a move, hinting at what's about to happen.
  • Follow-through — Parts of an element keep moving and settle slightly after the main motion stops, adding weight.
  • Squash & stretch — Deforming an element as it moves to convey weight, speed, and flexibility.
  • Perceived performance — The right animation makes an interface feel faster, even when it isn't.
  • Frequency of use — The more often a user sees an animation, the shorter and subtler it should be.
  • Spatial consistency — Animating so an element keeps its identity and position across states, so users never lose track of where things went.
  • Hardware acceleration — Animating transform and opacity lets the GPU keep motion smooth.
  • Reduced motion — Respecting the user's prefers-reduced-motion setting by toning down or removing motion.
  • Purposeful animation — 动效应具有功能性——引导方向、提供反馈、展示关系——而非仅仅装饰。
  • Anticipation — 动作前向相反方向的微小预动，暗示即将发生的动作。
  • Follow-through — 元素的部分区域在主运动停止后仍继续移动并逐渐稳定，增添重量感。
  • Squash & stretch — 元素移动时变形，以传达重量、速度和柔韧性。
  • Perceived performance — 合适的动画能让界面感觉更快，即使实际速度并未提升。
  • Frequency of use — 用户看到动画的频率越高，动画应越短、越细微。
  • Spatial consistency — 动画应保持元素在不同状态下的身份和位置，让用户始终能追踪元素的去向。
  • Hardware acceleration — 对transform和opacity属性进行动画，可让GPU保持动效流畅。
  • Reduced motion — 尊重用户的prefers-reduced-motion设置，减少或移除动效。