动效目录
12 个分类、91 个词条已经全部上线。每个词条都有独立 URL、中英文内容、预览、参数、prompt、HTML/CSS 与 reduced-motion 建议。
入场与退场
元素出现、离开和被揭示时的基础动效语言。
6/6 已完成02编排与时间
组织多个元素、多个时刻和时间节奏的动效词汇。
8/8 已完成03位移与变换
改变位置、尺寸、角度、透视和变换原点的词汇。
8/8 已完成04状态过渡
连接状态、视图和元素身份的过渡词汇。
7/7 已完成05滚动动效
与滚动位置、视口进入和页面导航相关的动效词汇。
5/5 已完成06反馈与交互
响应点击、触摸、拖拽和错误状态的动效词汇。
9/9 已完成07缓动
描述速度如何加速、减速和保持节奏的词汇。
7/7 已完成08弹簧动效
用质量、阻尼、速度和弹性描述物理式动效的词汇。
9/9 已完成09循环与环境动效
自动运行、循环播放和营造轻微生命感的动效词汇。
7/7 已完成10润色与效果
让界面更精致、信息变化更清楚的小型效果词汇。
10/10 已完成11性能
判断动效是否流畅、是否会卡顿和如何优化渲染的词汇。
6/6 已完成12原则
决定什么时候该动、该怎么动和如何保护用户体验的原则。
9/9 已完成91 词条
淡入 / 淡出用于让用户理解新内容如何出现或离开界面。
滑入用于让用户理解新内容如何出现或离开界面。
缩放入场用于让用户理解新内容如何出现或离开界面。
弹入用于让用户理解新内容如何出现或离开界面。
揭示用于让用户理解新内容如何出现或离开界面。
进入 / 离开用于让用户理解新内容如何出现或离开界面。
关键帧用于把多个动作组织成可理解的节奏。
插值 / 补间用于把多个动作组织成可理解的节奏。
错峰用于把多个动作组织成可理解的节奏。
编排用于把多个动作组织成可理解的节奏。
延迟用于把多个动作组织成可理解的节奏。
时长用于把多个动作组织成可理解的节奏。
填充模式用于把多个动作组织成可理解的节奏。
阶梯动画用于把多个动作组织成可理解的节奏。
位移用于表达空间、深度和物体状态变化。
缩放用于表达空间、深度和物体状态变化。
旋转用于表达空间、深度和物体状态变化。
倾斜用于表达空间、深度和物体状态变化。
3D 倾斜 / 翻转用于表达空间、深度和物体状态变化。
透视用于表达空间、深度和物体状态变化。
变换原点用于表达空间、深度和物体状态变化。
感知触发点的动效用于表达空间、深度和物体状态变化。
交叉淡化用于保持状态变化前后的视觉连续性。
连续性过渡用于保持状态变化前后的视觉连续性。
形变用于保持状态变化前后的视觉连续性。
共享元素过渡用于保持状态变化前后的视觉连续性。
布局动画用于保持状态变化前后的视觉连续性。
手风琴 / 折叠用于保持状态变化前后的视觉连续性。
方向感过渡用于保持状态变化前后的视觉连续性。
滚动揭示用于把滚动位置转化成有方向感的视觉反馈。
滚动驱动动画用于把滚动位置转化成有方向感的视觉反馈。
视差用于把滚动位置转化成有方向感的视觉反馈。
页面过渡用于把滚动位置转化成有方向感的视觉反馈。
视图过渡用于把滚动位置转化成有方向感的视觉反馈。
悬停效果用于让界面确认用户动作并保持物理感。
按压 / 点击反馈用于让界面确认用户动作并保持物理感。
长按确认用于让界面确认用户动作并保持物理感。
拖拽用于让界面确认用户动作并保持物理感。
拖拽排序用于让界面确认用户动作并保持物理感。
滑动关闭用于让界面确认用户动作并保持物理感。
橡皮筋回弹用于让界面确认用户动作并保持物理感。
摇晃 / 抖动用于让界面确认用户动作并保持物理感。
涟漪用于让界面确认用户动作并保持物理感。
缓动用于控制速度变化，让动效感觉灵敏或平稳。
缓出用于控制速度变化，让动效感觉灵敏或平稳。
缓入用于控制速度变化，让动效感觉灵敏或平稳。
缓入缓出用于控制速度变化，让动效感觉灵敏或平稳。
线性用于控制速度变化，让动效感觉灵敏或平稳。
三次贝塞尔用于控制速度变化，让动效感觉灵敏或平稳。
非对称缓动用于控制速度变化，让动效感觉灵敏或平稳。
弹簧用于让动态响应保留速度、重量和可打断性。
刚度 / 张力用于让动态响应保留速度、重量和可打断性。
阻尼用于让动态响应保留速度、重量和可打断性。
质量用于让动态响应保留速度、重量和可打断性。
弹跳用于让动态响应保留速度、重量和可打断性。
感知时长用于让动态响应保留速度、重量和可打断性。
动量用于让动态响应保留速度、重量和可打断性。
速度用于让动态响应保留速度、重量和可打断性。
可打断动画用于让动态响应保留速度、重量和可打断性。
跑马灯用于用持续动效表达等待、活性或环境氛围。
循环用于用持续动效表达等待、活性或环境氛围。
往返循环用于用持续动效表达等待、活性或环境氛围。
环绕用于用持续动效表达等待、活性或环境氛围。
脉冲用于用持续动效表达等待、活性或环境氛围。
漂浮用于用持续动效表达等待、活性或环境氛围。
空闲动效用于用持续动效表达等待、活性或环境氛围。
模糊用于把信息变化和视觉细节处理得更精致。
裁切路径用于把信息变化和视觉细节处理得更精致。
遮罩用于把信息变化和视觉细节处理得更精致。
前后对比滑杆用于把信息变化和视觉细节处理得更精致。
线条绘制用于把信息变化和视觉细节处理得更精致。
文字形变用于把信息变化和视觉细节处理得更精致。
骨架屏 / 微光用于把信息变化和视觉细节处理得更精致。
数字滚动用于把信息变化和视觉细节处理得更精致。
等宽数字用于把信息变化和视觉细节处理得更精致。
打字机用于把信息变化和视觉细节处理得更精致。
帧率（FPS）用于帮助识别卡顿来源并选择更稳的实现方式。
卡顿用于帮助识别卡顿来源并选择更稳的实现方式。
丢帧用于帮助识别卡顿来源并选择更稳的实现方式。
合成用于帮助识别卡顿来源并选择更稳的实现方式。
will-change用于帮助识别卡顿来源并选择更稳的实现方式。
布局抖动用于帮助识别卡顿来源并选择更稳的实现方式。
有目的的动效用于把动效判断转化成可执行的设计工程规则。
预备动作用于把动效判断转化成可执行的设计工程规则。
跟随动作用于把动效判断转化成可执行的设计工程规则。
挤压与拉伸用于把动效判断转化成可执行的设计工程规则。
感知性能用于把动效判断转化成可执行的设计工程规则。
使用频率用于把动效判断转化成可执行的设计工程规则。
空间一致性用于把动效判断转化成可执行的设计工程规则。
硬件加速用于把动效判断转化成可执行的设计工程规则。
减少动态用于把动效判断转化成可执行的设计工程规则。