减少动态 · Reduced Motion
英文：Reduced Motion
动效与交互难度：入门 ★
🗣️一句话大白话
尊重用户“减少动态”的系统设置（prefers-reduced-motion），关闭或简化非必要动效。动效的“无障碍底线”，也是专业度标尺。macOS/Windows 都有“减弱动态”设置；Web 用 prefers-reduced-motion 媒体查询检测。专业做法：检测到后关闭装饰性动效（视差、聚光、扫光、光标跟随），保留必要反馈（按钮状态、操作结果）。告诉 AI“加 prefers-reduced-motion 降级”是很多 AI 默认不做的。要点：是“关闭非必要动效”不是关全部；验证方法：系统开减弱动态后页面应安静。
🎬真实场景
所有带动效的页面（无障碍标配）、作品集、内容站
📮你可以这样说
「【图像模型版】所有动效加无障碍降级：检测到用户“减弱动态”设置时，关闭装饰性动效（视差/聚光/扫光/跟随），保留操作反馈（按下/成功/错误）。 【HTML/CSS/JS 版】@media (prefers-reduced-motion: reduce) { .decorative { animation: none !important; transition: none !important; } } 并为装饰动效元素统一加 .decorative 类。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：减少动态=关掉所有动画；必要反馈（成功/错误）仍要保留
- ▸只对动画加关闭、不对无限循环动效加，仍不达标
🚫什么时候别用
- ✗无（这是每个动效项目的标配）
🧩常见变体
完全关闭替换为淡入仅保留必要反馈
💡小贴士
- ✦装饰动效统一挂 .decorative 类，一条媒体查询全关
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（下篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗