动效原理 · 做动效的门道
减弱动效Reduced motion
- 尊重
- 无障碍
- 克制
系统里开启了减弱动态效果的用户，应当看到淡入淡出或不动的结果，而不是被强制播放位移和缩放。
什么时候用它
所有涉及位移、缩放、循环的动画都要考虑它；纯淡入淡出通常可以保留。
参数
prefers-reduced-motion: reduce · drops translate/scale · keeps ≤150ms cross-fade · linear
配方
减弱动效 → 150ms linear保留 ≤150ms cross-fade减弱动效 → prefers-reduced-motion: reduce · drops translate/scale
给 AI 的一句话
为这个动画加上 prefers-reduced-motion: reduce 的处理：位移和缩放归零，只保留 150ms 以内的淡入淡出。