减少动效Prefers Reduced Motion
你可能会说
有人开了系统减少动效，我的页面动画还在动，要处理吗？
读取用户的系统动效偏好，并减少或替换非必要的动态效果访客开启系统的“减少动态效果”后，网页可以查询这项偏好，并减少、停止或替换非必要动画，例如把大幅位移改为静态状态。页面仍要清楚传达加载和状态变化；旋转图标可以换成文字或进度信息，不必保留旋转本身。切换系统设置后检查页面是否随之变化。
先知道
也常被叫作减少动效Prefers-reduced-motion
切换系统开关，看页面动画怎样响应
example.com
卡片一卡片二卡片三
加载指示 + 装饰动画都在动
减少动效：未开启
- 背景渐变装饰：缓慢移动
- 页面布局：保留
- 加载状态：旋转指示
这里用控件模拟系统偏好；开启后背景渐变和旋转指示停止，页面仍保留可读的加载状态。
减少动效要处理什么
装饰动画减弱或停止：旋转、大幅滑动、视差滚动这类纯装饰动效，在设置开启时应该停下。
状态信息仍要清楚：减少动效时可以停掉加载旋转，再用文字或进度表示仍在等待；保留信息不等于保留动画。
用系统设置验证：改完在系统设置里切换一次，看页面动画是否真的随之变化，才算验收。
你可以这样告诉 AI Agent
请让页面响应系统的减少动效偏好：开启时减少或替换非必要动画。加载图标可以停止旋转，但页面仍须用静态文字或进度说明等待状态。改完切换系统设置，确认页面会响应。
接下来学什么
延伸阅读 · 权威出处
快速练习