前言
当你想让 AI 帮你实现一段动画时，最大的障碍往往不是技术，而是”词不达意”。你脑子里有画面，却说不出它叫什么。这篇文章整理了一套 Web 动画的通用词汇——掌握它们，你就能用一个词替代一整段含糊的描述，让人（和 AI）一听就懂。
做动画这件事，难的从来不是写几行 CSS 或调一个库，而是知道自己到底想要什么，并能精准地把它说出来。
很多人提需求时只能说”让它动得自然一点””加个酷炫的过渡”,这种描述既无法落地，也无法沟通。而真正懂行的人会说:”这里用一个 ease-out 的 scale in,配合 stagger 入场;切换时做 shared element transition。”——同样一句话,后者把模糊的感觉变成了可执行的方案。
下面这套词汇,按场景分门别类,涵盖了 UI 动画中绝大多数常见模式。建议收藏,提需求或写 prompt 时随手对照。
一、入场与退场（Entrances & Exits）
元素如何出现、如何消失。
| 术语 | 英文 | 说明 |
|---|---|---|
| 淡入 / 淡出 | Fade in / Fade out | 通过改变透明度（opacity）让元素出现或消失 |
| 滑入 | Slide in | 元素从屏幕外（左、右、上、下）滑入画面 |
| 缩放入场 | Scale in | 元素从小到大地”长”出来，通常搭配淡入 |
| 弹入 | Pop in | 元素出现时带一点过冲，像”弹”进位置 |
| 揭示 | Reveal | 内容逐渐揭开，常通过动画化 clip-path 或遮罩实现 |
| 进入 / 退出 | Enter / Exit | 元素被添加到屏幕或移除时播放的那段动画 |
二、编排与时序（Sequencing & Timing）
如何协调多个元素、多个瞬间。
| 术语 | 英文 | 说明 |
|---|---|---|
| 关键帧 | Keyframes | 动画中定义的若干节点（0%、50%、100%），浏览器填补其间过程 |
| 插值 / 补间 | Interpolation / Tween | 在起止值之间生成所有中间帧，让运动连续 |
| 错峰 | Stagger | 多元素一个接一个地动，彼此留延迟，形成瀑布感 |
| 编排 | Orchestration | 刻意安排多段动画时序，使其像一个统一的整体动作 |
| 延迟 | Delay | 动画开始前的等待时间 |
| 时长 | Duration | 一段动画持续多久 |
| 填充模式 | Fill mode | 动画前后是否保留首帧或末帧样式（如 forwards） |
| 分步动画 | Stepped animation | 被切分成若干离散步骤的动画，比如倒计时器 |
三、移动与变换（Movement & Transforms）
改变元素的位置、大小或角度。
| 术语 | 英文 | 说明 |
|---|---|---|
| 位移 | Translate | 沿 X 轴或 Y 轴移动元素 |
| 缩放 | Scale | 让元素变大或变小 |
| 旋转 | Rotate | 让元素绕某个点旋转 |
| 斜切 | Skew | 沿 X/Y 轴倾斜元素，使其偏离矩形形状 |
| 3D 倾斜 / 翻转 | 3D tilt / Flip | 在 3D 空间旋转（rotateX / rotateY），增加纵深感 |
| 透视 | Perspective | 3D 效果强弱；值越小纵深越夸张，仿佛观者更近 |
| 变换原点 | Transform origin | 缩放或旋转所围绕的锚点 |
| 原点感知动画 | Origin-aware animation | 元素从触发源”长”出来，如弹出层从按钮处展开而非自身中心 |
四、状态间的过渡（Transitions Between States）
把一个状态、视图或元素连接到另一个。
| 术语 | 英文 | 说明 |
|---|---|---|
| 交叉淡化 | Crossfade | 一个元素淡出的同时，另一个在同位置淡入 |
| 连续性过渡 | Continuity transition | 视觉连接”之前/之后”以保持方向感，如同一矩形放大缩小 |
| 形变 | Morph | 一个形状平滑变成另一个，典型如灵动岛 |
| 共享元素过渡 | Shared element transition | 元素从一个位置移动并变形到另一处，如缩略图展开成卡片 |
| 布局动画 | Layout animation | 尺寸或位置变化时平滑动到新位置，而非直接跳过去 |
| 手风琴 / 折叠 | Accordion / Collapse | 区块平滑展开收起高度，以显示或隐藏内容 |
| 方向感知过渡 | Direction-aware transition | 前进与后退时内容朝相反方向滑动，让导航有方向感 |
五、滚动（Scroll）
与滚动或视图切换绑定的动效。
| 术语 | 英文 | 说明 |
|---|---|---|
| 滚动揭示 | Scroll reveal | 元素进入视口时淡入或滑入到位 |
| 滚动驱动动画 | Scroll-driven animation | 动画进度直接与滚动位置挂钩 |
| 视差 | Parallax | 滚动时背景与前景以不同速度移动，营造纵深感 |
| 页面过渡 | Page transition | 从一个页面或路由导航到另一个时播放的动画 |
| 视图过渡 | View transition | 浏览器在两个状态或页面间做形变，连接共享元素 |
六、反馈与交互（Feedback & Interaction）
回应用户的操作。
| 术语 | 英文 | 说明 |
|---|---|---|
| 悬停效果 | Hover effect | 光标移到元素上时的视觉变化 |
| 按压 / 点按反馈 | Press / Tap feedback | 点击时元素微微缩小，带来实体感 |
| 长按确认 | Hold to confirm | 用户按住按钮时进度逐渐填满 |
| 拖拽 | Drag | 抓住元素拖动，松手后常带惯性 |
| 拖拽排序 | Drag to reorder | 拖动列表条目重排，其余条目自动让位 |
| 滑动消除 | Swipe to dismiss | 把元素拖出屏幕来关闭，如抽屉或 toast |
| 橡皮筋效果 | Rubber-banding | 拖动超界时的阻力与回弹，即 iOS 过度滚动手感 |
| 抖动 / 摇摆 | Shake / Wiggle | 快速左右晃动，提示出错或输入被拒 |
| 涟漪 | Ripple | 从点按处扩散出的圆形，确认这次点击 |
七、缓动（Easing）
速度在动画过程中如何变化。
| 术语 | 英文 | 说明 |
|---|---|---|
| 缓动 | Easing | 动画加速或减速的节奏 |
| 缓出 | Ease-out | 先快后慢。多数 UI 与响应用户操作的动画默认用它 |
| 缓入 | Ease-in | 先慢后快。通常应避免，易显迟钝 |
| 缓入缓出 | Ease-in-out | 慢—快—慢。适合屏幕上元素从 A 到 B 的移动 |
| 线性 | Linear | 匀速。UI 中应避免，只留给加载转圈或跑马灯 |
| 三次贝塞尔 | Cubic-bezier | 自定义的缓动曲线，用于精确控制 |
| 非对称缓动 | Asymmetric easing | 加减速节奏不同的曲线，比对称曲线更显灵动 |
八、弹簧动画（Spring Animations）
以物理为基础的运动，是固定时长缓动之外的选择。
| 术语 | 英文 | 说明 |
|---|---|---|
| 弹簧 | Spring | 由张力、质量、阻尼驱动的运动，而非固定时长 |
| 刚度 / 张力 | Stiffness / Tension | 弹簧拉向目标的力度，越高越干脆 |
| 阻尼 | Damping | 弹簧稳定的速度，越低弹跳震荡越多 |
| 质量 | Mass | 元素的重量感，越大动得越慢越笨重 |
| 弹跳 | Bounce | 会过冲再回落稳定的弹簧，增添趣味 |
| 感知时长 | Perceptual duration | 弹簧”感觉上”结束的时刻，尽管底层仍在微调收敛 |
| 动量 | Momentum | 携带速度的运动，尤其在拖拽或被打断后 |
| 速度 | Velocity | 元素运动多快、朝哪；被打断时弹簧将其带入下段动画 |
| 可打断动画 | Interruptible animation | 运动途中可被平滑改向，不必先播完 |
九、循环与环境动效（Looping & Ambient Motion）
那些自顾自运行的动画。
| 术语 | 英文 | 说明 |
|---|---|---|
| 跑马灯 | Marquee | 文字或内容循环不断地滚动 |
| 循环 | Loop | 重复播放的动画，可固定次数或无限 |
| 交替 | Alternate / yoyo | 每次迭代正放后再倒放，而非跳回开头 |
| 环绕 | Orbit | 一个元素沿连续轨迹围着另一个转 |
| 脉动 | Pulse | 轻柔重复的缩放或透明度变化，吸引注意 |
| 漂浮 | Float | 轻柔连续的上下浮动，让静止元素显得鲜活轻盈 |
| 待机动画 | Idle animation | 元素闲置等待交互时播放的细微动效 |
十、打磨与特效（Polish & Effects）
把”好”和”卓越”区分开来的小细节。
| 术语 | 英文 | 说明 |
|---|---|---|
| 模糊 | Blur | 用模糊滤镜柔化元素，或掩盖细微瑕疵 |
| 裁剪路径 | Clip-path | 把元素裁剪成形状，用于揭示、遮罩、前后对比滑块 |
| 遮罩 | Mask | 用形状或渐变隐藏/显示局部，类似 clip-path 但边缘可柔和渐隐 |
| 前后对比滑块 | Before / after slider | 可拖动分割线，在两张叠图间擦除切换以对比 |
| 线条描绘 | Line drawing | SVG 路径像被隐形的笔逐渐勾勒出来 |
| 文字形变 | Text morph | 文字变化时逐字符做动画，引向新数值 |
| 骨架屏 / 微光 | Skeleton / Shimmer | 加载时的占位符，带一道流动的光泽 |
| 数字滚动 | Number ticker | 数字像翻滚一样递增到目标值 |
| 等宽数字 | Tabular numbers | 固定宽度数字，变化时不左右抖动；滚动数字/计时器必备 |
| 打字机 | Typewriter | 文字一个字符一个字符地出现，像被敲打出来 |
十一、性能（Performance）
是什么让动效保持顺滑而不卡顿。
| 术语 | 英文 | 说明 |
|---|---|---|
| 帧率 | Frame rate / FPS | 每秒绘制帧数。60fps 是顺滑基准，新屏可达 120fps |
| 卡顿 | Jank | 浏览器跟不上、丢帧时出现的可见顿挫 |
| 丢帧 | Dropped frame | 浏览器错过绘制某帧的时机，造成微小卡顿 |
| 合成 | Compositing | 让 GPU 在独立图层移动/淡化元素，无需重排重绘 |
| will-change | will-change | CSS 提示元素即将动起来，好提前提升到独立图层 |
| 布局抖动 | Layout thrashing | 动画化 width/height/top/left 迫使每帧重排，引发卡顿 |
十二、值得了解的原则（Principles to Know）
指导”何时动、如何动”的理念。
| 术语 | 英文 | 说明 |
|---|---|---|
| 有目的的动画 | Purposeful animation | 动效应服务于功能——指引、反馈、揭示关系，而非纯装饰 |
| 预备动作 | Anticipation | 正式动作前朝反方向小小蓄势，暗示接下来要发生什么 |
| 跟随收尾 | Follow-through | 主体停止后部分元素继续运动稍后才稳定，增添重量感 |
| 挤压与拉伸 | Squash & stretch | 运动时发生形变，传达重量、速度与柔韧性 |
| 感知性能 | Perceived performance | 恰当动画让界面感觉更快，即便实际并未变快 |
| 使用频率 | Frequency of use | 用户越频繁看到的动画，越应短而克制 |
| 空间一致性 | Spatial consistency | 元素在状态间保持身份与位置，让用户不跟丢东西去向 |
| 硬件加速 | Hardware acceleration | 动画化 transform 和 opacity 让 GPU 保持顺滑 |
| 减弱动效 | Reduced motion | 尊重用户 prefers-reduced-motion 设置，弱化或移除动效 |
写在最后
这套词汇真正的价值,不在于背下每一个名字,而在于它帮你建立起一种对动效的拆解视角:任何一段让你眼前一亮的交互,都可以被分解为”入场方式 + 缓动曲线 + 时序编排 + 收尾细节”的组合。
下次当你想说”让它动得高级一点”时,试着换成:”入场用 scale in 配 ease-out,多个元素 stagger 进场,hover 时加一点 spring 反馈”——你会发现,能说清楚的需求,才是能被实现的需求。
评论