动效词条总览 · 112 条动效的中英日三语对照

入场与退场 8

元素第一次出现在屏幕上的方式——它怎么来，要不要带方向。

淡入Fade in 元素从全透明慢慢显出来，位置和大小都不变，只有存在感在增加
滑入Slide in 元素从画面外或某一侧滑进最终位置，位移通常只有 8–24px，配合淡入会更自然
缩放进入Scale in 元素从略小（约 0.9 倍）放大到原始大小，像从远处靠近镜头，让人把注意力放上去
弹出Pop in 元素从更小的尺寸快速放大，末尾轻微越过目标值再收回，看起来像“啪”地弹出来
揭示Reveal 用遮罩或裁剪把元素一点点露出来，像幕布被拉开，而不是整体变透明
逐词遮罩揭示Masked word reveal 标题里每个词像从一条看不见的横缝里升起来，一个接一个：先出来的已经站定，后面的还在下面等着
图片模糊聚拢Blur-up image load 图片先是一团糊掉的色块、还略微放大着，然后一边变清晰一边往回收 —— 从「一眼看出主色调」过渡到「看得清细节」，收的时候是往里的，所以边缘不…
开场加载序列Preloader sequence 打开先看到一层盖满屏的底色，中间一个数字从 0 数到 100，下面一条线跟着填满；数到 100 时几块幕布错峰往上一掀，首页才露出来

编排与节奏 5

一组动画谁先谁后、各花多久，合起来形成的那股节奏。

关键帧Keyframes 把一段动画拆成几个时间点上的状态（0%、50%、100%），中间的过程交给浏览器补出来
错峰Stagger 同类元素不是一起动，而是按顺序各晚一点开始，形成一道扫过去的波浪
编排Orchestration 安排多个元素谁先谁后、各花多久，让一组动效读起来像一句话，而不是同时炸开
时长与延迟Duration & Delay 时长决定动作多快，延迟决定它什么时候开始，这两个值共同决定界面的节奏
分步动画Stepped animation 把连续的过渡切成若干等份，一格一格地跳，而不是平滑地滑过去

位移与变换 7

元素在不改变内容的前提下，改变自己的位置、角度和朝向。

位移Translate 把元素沿着 X、Y 或 Z 轴整体挪动一段距离，形状不变，只改位置
旋转Rotate 让元素绕着一个点转一定角度，常用来表达打开与收起，或者正在加载
斜切Skew 把矩形沿着一个方向推斜，让它变成平行四边形，看起来像被风吹了一下
3D 倾斜3D tilt 根据鼠标或手指的位置，让卡片在三维空间里轻微转向，像被光扫过一样
变换原点Transform origin 指定缩放和旋转围绕哪一个点发生，默认是元素的正中心
从触发点生长Origin-aware animation 弹层从被点击的那个按钮的位置长出来，收回时也回到同一个点，让人一眼看懂它从哪来
拖拽环绕 3D 展厅Drag-orbit 3D showroom 按住往左右拖，动的不是商品，而是你绕着货架在转：近的物件走得快、远的走得慢，拖起来有重量、松手还会滑一段

状态之间的转换 12

在同一个界面里，内容从 A 样子变成 B 样子的过程。

交叉淡化Crossfade 旧内容变透明的同时新内容变清晰，两者有一小段重叠，中间不会出现空白
形变Morph 同一个东西改变形状、尺寸或圆角，从一种样子连续变成另一种样子，过程中始终是同一个元素
共享元素转场Shared element transition 列表里的缩略图在打开详情页时飞到新位置并放大，让两个页面看起来是同一个空间
布局动画Layout animation 元素增删或换位置时，其余元素平滑地让开或补位，而不是瞬间跳到新位置
手风琴折叠Accordion 一块内容展开或收起时，它的高度平滑变化，下面的内容被顺势推开或收回
有方向感的转场Direction-aware transition 前进时新页面从右侧进入、返回时从左侧进入，方向和用户的导航动作保持一致
像素溶解Pixel dissolve 下一张图不是淡进来的，是一格一格「长」出来的：每一格有自己的阈值，阈值 = 对角位置 + 一点随机，所以溶解斜着扫过去，而且不是齐刷刷的
形状蒙版转场Shape overlay transition 点一下，几条色块从下往上扫满整屏，把旧内容盖住，再从上方退出 —— 露出的是新内容
卡片撑满全屏Card unfurl to fullscreen 点一张圆角卡片，它连着圆角一起长大铺满整屏；里面的图同时反向缩小，所以看起来像取景框被拉开，而不是照片被放大 —— 中间不会糊
整页掀起转场Scroll-anchored page flip 点进下一页时，当前这页像一张纸从你视线的下方被掀起、往外翻走，翻的时候还带一点旋转；新页面从屏幕底下整屏升上来
原点圆形扩散Circle-origin reveal 点那个图标，一整层内容不是淡入、也不是从边上推入，而是从图标所在的那个点像水波一样画出一个圆，圆越来越大直到铺满整屏；再点一下，圆又缩回同一…
着色器图像过渡Shader image transition 两张图之间的切换不是淡入淡出：画面像被水波或沙粒从一处推开，边缘扭曲着把新图顶出来，中途能看见两边的花纹绞在一起

滚动相关 13

和滚动挂钩的动效：滚到哪里、滚得多快，画面就变到哪里。

滚动进入Scroll reveal 元素在滚进可见区域时才播放入场，用户往下读的过程中内容一段段出现
滚动驱动Scroll-driven animation 动画进度直接绑定滚动位置，用户往回滚，动画就倒着走，像在拖一条时间轴
视差Parallax 背景比前景移动得慢一些，制造出前后错开的深度感
视图转场View transition 浏览器在切换前后各截一张图，自动把两张图之间的差异补成一段动画
阅读进度Reading progress 顶上一条细线，滚多少填多少；右边几个刻度告诉你「一共几段、现在第几段」
平滑滚动接管Smooth scrolling 滚轮推一下，内容不是立刻跟上来，而是带一点重量地追上去；松手还会缓缓滑一小段才停
按滚动方向收纳导航Direction-aware nav hide 往下读的时候顶部那条导航自己滑走了，把屏幕让给内容；只要往上滚一点点，它立刻滑回来 —— 哪怕你还在页面很下面
横向滚动区段Horizontal scroll section 往下滚，这一段却横着走：一排商品卡从右往左平移过去，滚到头才继续往下
滚动逐词点亮Scroll word illumination 一整段灰扑扑的文字，随着往下滚，词一个一个从「蒙着雾」变得清晰，读到哪亮到哪；往回滚，后面的词又退回雾里
滚动分档失焦Scroll quantized focus blur 一大段文字被钉在屏幕上，读到哪一段哪一段是清楚的，其它几段一起糊成虚影；往下滚，焦点一档一档往下移，像有人帮你把手电筒往下照
从散落聚拢Assemble from scatter 一排卡片刚开始是歪七扭八散着的：每张被推到不同方向、各自歪着不同角度
滚动推播放头Scroll-scrubbed playback 一段原本自己播的动画，现在不自己播了：往下滚它就往前走，往回滚它就倒着放，停住它就定在那一帧
滚动逐帧序列Scroll frame sequence 看着像视频，其实是一叠预渲染图（演示里 36 张真实商品照）：往下滚它就往前跳一帧，往回滚滚就倒回去一帧，停住画面就定住

反馈与交互 15

用户操作之后，界面立刻给出的回应，让人确信这一步生效了。

悬停反馈Hover effect 鼠标移到可点元素上时，它在很短时间内给一点颜色或亮度的变化，表示这里能点
按压反馈Press feedback 按下时元素略微缩小或变暗，让手指感觉确实按到了
长按确认Hold to confirm 用户按住不放，一条进度环慢慢走完，走完才真正执行，用来给危险操作加一道缓冲
拖拽Drag 元素跟随光标或手指移动，位移量完全由用户决定，松手后可能停住也可能弹回
拖拽排序Drag to reorder 按住一项把它拖到别的位置，其他项实时让位，松手后落位并轻微回弹
滑动关闭Swipe to dismiss 横向滑动一个条目把它推走，滑过一定距离或速度够了就直接关闭
橡皮筋回弹Rubber-banding 拖到边界后还能再拉一点，但越拉越费劲，松手就弹回去，像拉一根橡皮筋
抖动Shake 元素左右快速抖动几下，明确告诉用户这里出错了、输入不被接受
涟漪Ripple 点击处扩散出一圈逐渐变淡的水波，把“点这里生效了”这件事画出来
贴纸揭角Sticker peel 指针靠到角上，那一角就翘起来、露出下面一层，像贴纸被指尖挑起
高光扫过Glare sheen 指针一进去，一道斜的亮光从卡片上扫过去，同时指针那一小块微微提亮
悬停让其它项退让Sibling dim on hover 鼠标停在清单的某一项上，动的是其它几项：它们一起变暗、缩一点、往两边让开，被指的那一项反而像被推到了前面
磁吸吸附Magnetic snap 鼠标靠近按钮时，按钮自己往光标那边挪一小段，像被吸住；移开时它弹回原位，回弹的时候还稍微过一点头
反色跟随光标Difference cursor 多了一个自己做的圆点跟着指针走，但它永远慢半拍 —— 不是贴在指针上
悬停预览跟随Cursor preview follow 指针划过菜单里的名字，一张预览图就从指针那儿冒出来跟着走；移到下一个名字，预览图原地换成那一个，指针一动它又跟上去

缓动与曲线 7

速度随时间怎么变，决定了同一段动画是生硬还是自然。

缓动Easing 速度随时间怎么变化
缓出Ease-out 一开始快，接近终点时慢下来，像东西被推出去后自然减速，是界面里最常用的缓动
缓入Ease-in 一开始慢，越走越快，适合表现元素正在加速离开画面、不再需要被看清楚
缓入缓出Ease-in-out 两头慢、中间快，整个过程对称，适合在原地来回移动、始终留在视野里的元素
匀速Linear 全程速度不变，没有任何加减速，看起来像机器在匀速走
贝塞尔曲线Cubic-bezier 用四个数字描述一条速度曲线，是上面几种缓动的通用写法，可以精确调出你想要的节奏
非对称缓动Asymmetric easing 去和回用不同的曲线：去的快、回的慢，或者反过来，让动作更有主次

弹簧与物理 5

让元素像真实物体一样运动：有质量、有速度，还能被中途打断。

弹簧Spring 用刚度和阻尼描述运动，元素像被弹簧拉着走，能自然处理中途改变方向的情况
回弹Bounce 弹簧的阻尼调低之后，元素到达终点会冲过头再弹回来，产生明显的回弹
惯性Momentum 用户松手后元素不会立刻停住，而是带着松手时的速度继续滑行一段，逐渐减速
速度继承Velocity 新动画从当前这一刻的实际速度接着走，而不是从头开始，所以动作看起来是连续的
可打断动画Interruptible animation 动画播到一半时用户又操作了，它就从当前位置直接转向新目标，不会先跳回起点

循环与氛围 8

一直在重复播放的动画，用来维持气氛或表示某个状态还在持续。

跑马灯Marquee 内容横向匀速滚过一条可视带，循环播放，常用来展示放不下的长文本或滚动公告
往复循环Alternate (yoyo) 动画正向播完后自动反向播回，来回往复，不会出现突然跳回起点的断裂
环绕Orbit 一个元素绕着另一个元素的中心做圆周运动，常用来表现卫星、轨道或正在围绕某处运作
脉动Pulse 元素有节奏地放大缩小或明暗变化，像心跳一样反复，用来表示还在运行、请看我
漂浮Float 元素缓慢地上下浮动，幅度很小、周期很长，像浮在水面上
待机动画Idle animation 界面安静下来后，某处仍在做极轻微的动作，让人觉得应用还活着、正在等自己
渐变流动Animated gradient 背景那团彩色不是静止的：颜色在慢慢游走、明暗互相渗透，像水面下的光
液态路径形变Liquid path morph 几个装饰形状一直在缓慢地变形：边缘一点点鼓起来又凹下去，像有弹性的液体，几秒一个来回，永不停止

细节与特效 11

让细节显得精致的具体手法，通常只在关键的一两处使用。

裁剪路径Clip-path 用一个形状决定元素哪些部分可见，没显示的部分像被刀切掉一样，常用来做擦除和揭示
前后对比滑块Before / after slider 一条竖线把改造前和改造后的两张图分开，拖动竖线就能看到变化过程
线条自绘Line drawing 线条像被一支笔慢慢画出来，从起点延伸到终点，而不是整体淡入
文字形变Text morph 一个词被另一个词替换时，旧文字向上淡出、新文字从下方补上，像一个词换了个身
骨架屏微光Skeleton / Shimmer 加载时先用灰色色块占好位置，一道微光缓慢扫过，让等待有形状、也不显得卡住
数字滚动Number ticker 数字不是直接跳到新值，而是从旧值快速滚动到新值，让变化的大小看得见
打字机Typewriter 文字一个字符一个字符地出现，像有人在实时输入，光标在后面闪
文字乱码解码Text scramble 一串乱码飞快跳动，然后像解密一样从左往右逐渐锁成真正的文字；没锁定的位置还在抖
双色刷色Dual-copy colour wipe 一行字的颜色被「刷」过去：新颜色像被从一边推进来填满整行，字本身一步没动，也不是整体淡入淡出 —— 像有人拿刷子给它上色
可变字重跟随Variable font proximity 指针扫过一行字，靠近它的那几个字自己变粗、变宽，像被指针顶起来；移开它们又慢慢瘦回去
圆形噪点透镜Noise lens reveal 指针在画面上移动，一个边界柔软、带颗粒的圆跟着走；圆里面是另一层画面，圆外才是原来的内容

动效原理 4

做动效时反复用到的底层规律，以及不该越过的底线。

预备动作Anticipation 在往一个方向去之前，先朝反方向轻轻动一下，像起跳前先下蹲，让动作更有力气
跟随与余势Follow-through 主体停下来之后，附属的部分还继续动一小会儿才停，让整体显得有重量
挤压与拉伸Squash & stretch 运动过程中把元素压扁或拉长，模拟有弹性的物体落地和起跳时的变形
减弱动效Reduced motion 系统里开启了减弱动态效果的用户，应当看到淡入淡出或不动的结果，而不是被强制播放位移和缩放

文字特效 5

文字本身在动：字怎么落下来、怎么被一道光扫过。动的不是内容，是字形。

文字坠落Gravity drop 一个字一个字从上面掉下来，砸到底弹两下、压扁一点，然后定住
文字光泽Shine sweep 一道高光从字上扫过去，像金属反光
环绕文字Text on a path 文字不再排成一行，而是钉在一条曲线上：一圈印章慢慢转，下面一条弧上的字往前流
翻转文字Text flip 一个词向前倒下去、下一个从后面立起来，中间有一瞬间是空的 —— 那个空档就是「翻过去了」的证据
波浪文字Wave text 每个字都在沿正弦上下浮动，相位错开，看起来像一道波从字上走过去

光标与指针 4

还没按下去，界面就先有反应了 —— 指针从旁边经过、停在哪，画面跟着它变。

光标拖尾Cursor trail 指针走过的地方，身后落下一串慢慢缩小、淡出的东西（这里是商品图）
指针聚光Pointer spotlight 一束光跟着指针走，只把附近的东西照亮，同时把那一片的边框点起来
邻近放大Proximity magnify 指针靠近哪一枚，哪一枚就变大、抬起来，旁边的依次递减 —— 距离决定大小，不是「指到才变」
锁定准星Lock-on reticle 指针换成四角准星；移到一个能按的东西上，四角就吸过去、贴住它的边界，等于在说「我瞄的是这个」

氛围与背景 5

铺满整块背景、一直在慢慢动的画面。不是某个元件在动，是页面的空气在动。

极光渐变Aurora veil 几团大而软的颜色在里面慢慢漂，边界永远是糊的 —— 所以它不像「一块背景」，像空气本身有颜色
粒子漂浮Drifting particles 一层小颗粒在画面里慢慢飘，近的大而亮、远的小而暗，谁也不会撞到谁
描边流光Running border 一段光沿着卡片边缘绕圈跑，后面拖一条模糊的尾巴
网格感应Reactive grid 一层整齐的点阵铺在背景上，指针附近的那几颗亮起来、也变大一点；按一下，一圈涟漪从按下的位置往外扩
胶片颗粒Film grain 一层细碎的噪点盖在照片上，每帧都不一样 —— 于是平面的图有了「拍出来」的质地，而不是「渲染出来」的

液态与有机 3

像水滴那样互相吸引、融合、再分开。形状自己找平衡，边界始终是软的。

融球Metaball 一颗球周围有几颗小卫星在转，靠近的时候两者之间会「长」出一道桥，离开又断开
流体球Fluid orb 一个玻璃球，里面几层颜色互相穿过、一直在流，表面的高光跟着指针移动
液态指示器Liquid indicator 选中的那一块往下一格移动时先被拉长、再收回，中间有一段和原地连着 —— 像一滴水被拖过去