motion-design

动效设计

将这些规则应用于每个动画和过渡。示例使用无依赖的 CSS，以及 Web Animations API 和 View Transitions API。这些规则可直接用于任何框架或工具系统。详细规则和模式收录在 ./reference/ 中。应用或引用规则前，请先阅读相关文件。

核心要求

动画必须有明确目的，确保每个动画都易于访问，并且不添加运行时依赖。动效应阐明变化，而非仅作装饰。优先选择能满足需求的最轻量技术，复用项目现有的动效令牌，并在交付动画时一并提供减少动态效果的替代方案，而不是事后补充。

确认

如果你只是在审查，请直接报告发现的问题，不要暂停。在修改现有文件之前，请先确认预期的变更范围；如果需要更多背景信息才能做出正确判断，请先询问，不要猜测。

决策顺序

按以下步骤依次处理每个动画；任何一步不符合要求，就停止。

1. 决定是否要添加动画。根据下一节中的频率和目的门槛进行判断，并接受不添加动画的选择。请参阅 reference/principles.md。
2. 选择动效属性。仅对 transform 和 opacity 添加动画，并避免使用布局属性。请参阅 reference/performance.md。
3. 选择技术。状态变化使用 CSS 过渡，循环效果使用 CSS 动画，脚本驱动或可中断的动效使用 Web Animations API，DOM 变化且需要回退方案时使用 View Transitions API。请参阅 reference/techniques.md。
4. 设计进入和退出效果。进入时减速，退出速度要更快；弹出层的 transform-origin 设置在触发点；短列表使用错峰动画。请参阅 reference/entrances-and-exits.md。
5. 定义减少动态效果时的替代方案。提供真正的替代效果，例如交叉淡化，而不只是关闭动画。请参阅 reference/accessibility.md。
6. 确保可以中断。在符合预期的情况下，让用户能够在动效进行中将其反转或调整方向。请参阅 reference/interactivity.md。
7. 验证性能和质量。在中端设备上保持 60fps，然后运行检查清单。仅检查代码无法确认帧率或流畅度，因此，对于需要在运行中的页面上验证的内容，应标记为待验证，而不是已通过。请参阅 reference/performance.md 和 reference/checklist.md。

决策门槛

每个动画都必须依次通过以下两个问题的判断。任一问题不通过，就不要添加动画。

1. 频率。考虑用户看到该效果的频率。每天会看到数百次的内容不应添加动画。偶尔出现或首次出现的界面才有动效预算。
2. 目的。选择一个目的：反馈、空间一致性、状态指示、防止突兀变化，或愉悦感。只有在罕见或首次出现的界面中，才允许以愉悦感为目的添加动画。

频率	决策
每天数百次（键盘快捷键、命令面板）	不添加动画
每天数十次（悬停、列表导航）	仅使用几乎察觉不到的动画，或不添加动画
偶尔出现（模态框、抽屉、轻提示）	使用标准动画
罕见或首次出现（引导流程、成功提示）	此时可使用愉悦感动效

用户正在阅读或操作的内容不得为了视觉效果而移动。完整细节请参阅 reference/principles.md。

动效令牌

如果项目已有令牌，请复用。否则使用以下内置刻度，它自成体系，无需安装其他技能。完整刻度和可复制的 _tokens.css 位于 reference/motion-tokens.md。

时长	值	用途
--motion-duration-1	100ms	微反馈、悬停、图标
--motion-duration-2	150ms	退出、提示框消失
--motion-duration-3	200ms	下拉菜单、弹出层、小型进入动效
--motion-duration-4	300ms	模态框、抽屉、页面过渡
--motion-duration-5	500ms	大型或首次强调动效

缓动	值	用途
--motion-ease-out	cubic-bezier(0.22, 1, 0.36, 1)	进入动效，默认值
--motion-ease-standard	cubic-bezier(0.4, 0, 0.2, 1)	屏幕内移动
--motion-ease-in	cubic-bezier(0.4, 0, 1, 1)	离开屏幕的退出动效

参考索引

应用或引用规则前，请先阅读相关文件。

• 基础：
  • reference/principles.md — 何时添加动效、动效目的与克制原则
  • reference/motion-tokens.md — 时长、缓动、距离与缩放
• 技巧：
  • reference/techniques.md — 过渡、动画、Web Animations API 和 View Transitions
  • reference/entrances-and-exits.md — 进入、退出、打开与关闭的不对称性、transform-origin、交错动效
  • reference/interactivity.md — 可中断动效与手势体验
  • reference/performance.md — 合成器友好型属性与 60fps
• 模式：
  • reference/patterns.md — 精选的无依赖、无障碍方案
• 质量：
  • reference/accessibility.md — 减少动态效果的替代方案与前庭安全
  • reference/checklist.md — 测试清单
• 致谢：
  • reference/credits.md — 沿革与来源

反模式

• 对 width、height、top 或 left 等布局属性添加动画。
• 将减少动态效果视为关闭开关，而不是提供真正的替代方案。
• 对命令面板等高频使用的界面添加动画。
• 移动用户正在阅读或操作的内容。

---

作者：@planetabhi