用途:为网页动画、自动播放、循环动画和平滑滚动设计并验证减少动态效果行为,依据用户的 prefers-reduced-motion 偏好调整动画,保留交互含义的同时减少或去除运动。
主要能力:该偏好通过 prefers-reduced-motion 媒体查询暴露,取值为 no-preference(用户未设置,无需改动)和 reduce(用户已设置,必须改变动画)。在 reduce 下的处理原则是“移除运动,保留含义”:transform、translate、scale、位置与布局等运动应移除;opacity、颜色、背景色等不依赖运动的含义应保留。自动播放与循环动画应禁用或在代表性帧暂停;纯装饰性运动(空闲浮动、环境循环)应完全移除。例如缩放进入的模态框改为淡入,从 -100% 滑入的侧边栏改为淡入,多步表单的水平滑动改为交叉淡入。
使用方式:从设计阶段就准备两种偏好状态,实现 prefers-reduced-motion 并测试(Chrome DevTools 的 Rendering 面板可模拟该媒体特性)。CSS 中用 @media (prefers-reduced-motion: reduce) 替换空间运动或禁用动画;Tailwind 使用 motion-safe: 与 motion-reduce: 变体;Framer Motion 提供 useReducedMotion 钩子用于分支取值,MotionConfig reducedMotion="user" 可作为应用级安全网(默认是 never,不设置则不生效),但显式高度动画、SVG 效果、装饰性循环仍需单独检查。图像或视频类视觉隐喻可改为在帧之间跳变而非补间。SNIPPETS.md 提供了平滑滚动仅在 no-preference 下启用、自动播放图像与视频的静态回退、循环动画在关键帧暂停、无依赖 useReducedMotion 钩子等可直接使用的示例。
适用场景:需要遵守无障碍要求的网页动画、交互组件、自动播放媒体与滚动效果。
限制:完成标准是每个改动过的动画都有两种变体,并在开启模拟后实际观看 reduce 变体;常见失败是“减少”变体仍在运动,因为共享类或弹簧配置中遗留了某个 transform。Framer Motion 的 MotionConfig 不会禁用所有空间效果。
资料未提供该技能的收费、价格、平台限制或具体效果数据。