弹窗从底部放大飞入→原位 150ms 淡入
位置不再大幅移动，用户仍能看出“弹窗出现了”。
动效 · 克制与性能
减少动效Reduced Motion
尊重系统的减少动效偏好：停掉大位移、视差和自动播放，把它们换成静止或淡入，同时保留每一个状态反馈。
先打开开关，看页面听不听话
一台模拟手机里有视差头图、自动轮播、提交订单和优惠券弹窗。打开系统的「减弱动态效果」，再换三种实现策略，每个物件会标出现在的表现和对错。
① 打开系统开关真实路径：iPhone「设置 › 辅助功能 › 动态效果 › 减弱动态效果」；Mac「系统设置 › 辅助功能 › 显示 › 减少动态效果」。
你这台设备的真实设置：未开启
③ 在手机里操作滚动屏幕看头图、等轮播、点「提交订单」和「领取优惠券」。
—处大幅运动或自动播放没停0处反馈丢失
秋季上新✓ 合适视差头图：随滚动错位移动
新品 7 折
1 / 3
✓ 合适轮播：每 2.6 秒自动滑走✓ 合适提交反馈：转圈 + 进度照常
✓ 合适弹窗：从底部放大弹出
往下还有商品列表……（滚动屏幕看头图视差）
猜你喜欢 · 热销榜 · 店铺推荐
系统开关未开启：所有动效照常播放，这是给大多数人的默认体验。下一步：打开开关，看页面有没有听话。
从刚才的操作里提炼
- 这是用户在系统里给的明确要求：页面能读到它（AI 报告里叫
prefers-reduced-motion），不处理就等于忽视。 - 要停的是“大幅运动”：视差、缩放飞入、大位移转场、自动播放。前庭敏感的人看到这些会头晕、恶心，甚至要躺下休息。
- 要留的是“状态反馈”：按钮按下、加载进度、成功或失败提示。演示里一刀切把转圈冻住，用户就分不清是在处理还是卡死。
- CSS 和 JS 都要管：全局关掉 CSS 动画，JS 驱动的轮播、视差、滚动动效照样在动，要分别读取同一个偏好。
- 替换而不是删除：飞入改淡入，自动播放改手动，转圈改进度文字——信息还在，只是不动了。
什么时候要想到它
- 页面里有视差、滚动触发动画、自动轮播、大面积转场或背景视频时，一定要做。
- 只有按钮颜色过渡这类小反馈时，影响很小，但也要确认关掉后状态仍然清楚。
- 它不是“动效开关”的替代品：持续超过 5 秒的自动播放内容，即使用户没开这个设置，也应该能暂停（WCAG 2.2.2）。
怎么跟 AI 说，怎么验收
- 让 AI 先列清单：“列出页面所有动效，标出哪些是大位移/自动播放，哪些是状态反馈。”
- 给出替换规则：“开启减少动态效果时，大位移改为直接显示或 150ms 淡入，自动播放停止并提供手动控制；加载、成功、失败反馈保留。CSS 和 JS 动画都要读这个偏好。”
- 自己验收：打开系统设置（或 Chrome 开发者工具 › 更多工具 › Rendering › Emulate CSS media feature prefers-reduced-motion），逐页过一遍：有没有东西还在大幅移动？提交、加载时还看得出进度吗？
- 可选的站内开关：不熟悉系统设置的用户多时，可以在站内设置里加“减少动效”，和系统偏好任一开启即生效。
正反例：同一个页面，只改一处
正例 · 这样替换大位移改成原位淡入 自动播放改手动
轮播每 3 秒滑走→停在第一张，给出左右箭头
内容不再自己动，也不会在阅读时被抢走。
反例 · 别这样加载转圈被一起关掉 只关 CSS，不管 JS
转圈 + “处理中”→冻住的圆圈
用户以为卡死，反复点击或直接离开；反馈应改成进度文字或进度条。
全局 animation: none→轮播仍自动换页
JS 驱动的自动播放、视差和滚动动画要单独读取同一个偏好。
快速自测
AI 报告说：“已支持减少动效：检测到偏好时，全站 animation 和 transition 都设为 none。”你验收时最该追问哪一点？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。