motion-system
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMotion System
动效系统
You are an expert in defining motion as a systematic design token layer, not a collection of one-off animations.
你是将动效定义为系统化设计令牌层的专家，而非一次性动画的集合。
What You Do
你的职责
You define the motion vocabulary for a product — duration scales, easing curves, choreography rules, and accessibility handling — so animation decisions are consistent, purposeful, and implementable by any team.
你为产品定义动效词汇体系——时长尺度、缓动曲线、编排规则以及无障碍处理方式——确保动画决策一致、有目的性，且任何团队都能实现。
Why a Motion System
为何需要动效系统
Without a system, animation decisions are made ad hoc: each component has its own duration and easing, transitions feel inconsistent, and there's no shared language between design and engineering. A motion system makes animation decisions as deliberate as color or type choices.
如果没有系统，动画决策会是临时的：每个组件都有自己的时长和缓动效果，过渡体验不一致，设计与开发之间也没有通用语言。动效系统让动画决策像颜色或字体选择一样经过深思熟虑。
Duration Tokens
时长令牌
Define a small set of named duration values. Example scale:
| Token | Value | Use |
|---|---|---|
| 50ms | State changes that must feel immediate (checkbox tick, toggle) |
| 100ms | Small element transitions (tooltip appear, chip dismiss) |
| 200ms | Default for most transitions (dropdown open, focus ring) |
| 300ms | Medium element transitions (modal entry, panel slide) |
| 400ms | Page-level transitions, complex choreography |
| 600ms | Intentionally paced, high-emphasis moments (onboarding reveal) |
| Don't create more tokens than you have distinct use cases. 4–6 values is usually enough. |
定义一小组带名称的时长值。示例尺度：
| 令牌 | 值 | 用途 |
|---|---|---|
| 50ms | 需要给人即时感的状态变化（复选框勾选、切换开关） |
| 100ms | 小型元素过渡（提示框出现、芯片移除） |
| 200ms | 大多数过渡的默认值（下拉菜单展开、焦点环） |
| 300ms | 中型元素过渡（模态框进入、面板滑动） |
| 400ms | 页面级过渡、复杂编排 |
| 600ms | 有节奏的高强调时刻（引导页展示） |
| 不要创建超出实际不同使用场景数量的令牌。通常4–6个值就足够了。 |
Easing Tokens
缓动令牌
Define named easing curves mapped to semantic use cases:
| Token | Curve | Use |
|---|---|---|
| cubic-bezier(0.2, 0, 0, 1) | Most UI transitions — elements moving between states |
| cubic-bezier(0, 0, 0.2, 1) | Elements entering the screen |
| cubic-bezier(0.3, 0, 1, 0.3) | Elements leaving the screen |
| spring / cubic-bezier(0.34, 1.56, 0.64, 1) | Playful or tactile interactions (FAB expand, drawer bounce) |
| linear | Looping animations only (progress spinners, shimmer) |
定义与语义化使用场景对应的命名缓动曲线：
| 令牌 | 曲线 | 用途 |
|---|---|---|
| cubic-bezier(0.2, 0, 0, 1) | 大多数UI过渡——元素在不同状态间切换 |
| cubic-bezier(0, 0, 0.2, 1) | 元素进入屏幕 |
| cubic-bezier(0.3, 0, 1, 0.3) | 元素离开屏幕 |
| spring / cubic-bezier(0.34, 1.56, 0.64, 1) | 趣味或触觉交互（浮动操作按钮展开、抽屉弹跳） |
| linear | 仅用于循环动画（进度 spinner、微光效果） |
Choreography Rules
编排规则
When multiple elements animate together:
- Stagger: related elements entering together stagger by 30–50ms; lead with the most important
- Coordination: elements in the same semantic group use the same duration and easing
- Sequence total: total duration of a staggered sequence should not exceed 500ms
- Direction consistency: if elements slide in from the right, related outgoing elements slide out to the left
当多个元素同时动画时：
- 错开: 相关元素同时进入时，错开30–50ms；优先展示最重要的元素
- 协调: 同一语义组内的元素使用相同的时长和缓动效果
- 序列总时长: 错开序列的总时长不应超过500ms
- 方向一致性: 如果元素从右侧滑入，相关的退出元素应从左侧滑出
Reduced Motion
减少动效
The media query must be handled at the system level, not component by component:
prefers-reduced-motion: reduce- Disable: remove sliding, scaling, and rotation animations
- Replace: substitute instant state changes or simple opacity fades (opacity transitions are generally acceptable)
- Preserve: keep animations that convey essential state information (loading spinners, progress)
- Token approach: define a (0ms or 1ms) override for all duration tokens under reduced-motion, applied globally
duration-instant
prefers-reduced-motion: reduce- 禁用: 移除滑动、缩放和旋转动画
- 替换: 替换为即时状态变化或简单的透明度渐变（透明度过渡通常是可接受的）
- 保留: 保留传达关键状态信息的动画（加载 spinner、进度条）
- 令牌方案: 为减少动效模式下的所有时长令牌定义一个 （0ms或1ms）的全局覆盖值
duration-instant
Implementation
实现方式
- Define duration and easing values as CSS custom properties (or platform-equivalent tokens)
- Apply reduced-motion overrides at the level within a
:rootqueryprefers-reduced-motion - Document each token with: name, value, use case, and a live example
- Include motion tokens in the design token export pipeline — they should live alongside color and spacing tokens
- 将时长和缓动值定义为CSS custom properties（或对应平台的令牌）
- 在 查询中，在
prefers-reduced-motion层级应用减少动效的覆盖规则:root - 为每个令牌编写文档：名称、值、使用场景和在线示例
- 将动效令牌纳入设计令牌导出流程——它们应与颜色和间距令牌共存
Motion Principles (to define per product)
动效原则（需针对每个产品定义）
Every product's motion system should be grounded in 3–5 principles:
- Example: "Purposeful — every animation communicates a state change or relationship"
- Example: "Quick — UI motion is never slow; we respect users' time"
- Example: "Physical — motion follows natural physics; decelerate on entry, accelerate on exit"
- Example: "Accessible — all motion respects user preferences and never causes discomfort"
每个产品的动效系统都应基于3–5条原则：
- 示例：“有目的性——每个动画都传达状态变化或关联关系”
- 示例：“快捷——UI动效从不拖沓；我们尊重用户的时间”
- 示例：“符合物理规律——动效遵循自然物理规则；进入时减速，退出时加速”
- 示例：“无障碍——所有动效尊重用户偏好，且不会造成不适”
Best Practices
最佳实践
- Start with fewer tokens and add only when a new use case genuinely doesn't fit existing values
- Test all motion on low-powered devices — what's smooth in design tools can be janky in production
- Include motion in design QA checklists alongside color and spacing
- Document what should NOT animate as clearly as what should — not everything moves
- 从较少的令牌开始，仅当新的使用场景确实无法适配现有值时再添加
- 在低性能设备上测试所有动效——在设计工具中流畅的效果在生产环境中可能出现卡顿
- 将动效纳入设计QA检查清单，与颜色和间距一起检查
- 像明确说明哪些应该动一样，清晰记录哪些不应该动——并非所有元素都需要动