无需登录 数据私有 本地保存

减少动效偏好模拟器 - prefers-reduced-motion 效果

11
0
0
0

动效偏好模拟器

模拟 prefers-reduced-motion: reduce 的视觉效果，帮助开发者测试无障碍动效

系统：完整动效
完整动效模式 — 所有动画正常运行
弹跳球动画

正常：上下弹跳 | 减少后：柔和呼吸效果，无位移

旋转加载器

正常：持续旋转 | 减少后：静态圆环，无旋转运动

悬停我 🖱️
悬停浮动卡片

正常：上浮+缩放 | 减少后：仅阴影微变，无位移

通知脉冲点

正常：缩放脉冲+光晕扩散 | 减少后：静态红点

渐变流动背景

正常：渐变色彩流动 | 减少后：静态渐变，无变化

🔥 最新资讯滚动展示 · 持续更新中 ·
自动滚动文字

正常：水平自动滚动 | 减少后：文字静止显示

CSS 实现示例

开发者可将以下代码集成到项目中，响应系统动效偏好：

/* 默认动效 — 正常动画 */ .animated-element { transition: transform 0.35s ease, box-shadow 0.35s ease; animation: bounce 1s ease-in-out infinite; } .animated-element:hover { transform: translateY(-6px) scale(1.03); } /* 响应系统动效偏好 */ @media (prefers-reduced-motion: reduce) { .animated-element { transition: none; /* 移除过渡 */ animation: none; /* 停止动画 */ } .animated-element:hover { transform: none; /* 无位移 */ } }

也可使用 animation: none !important; transition: none !important; 作为全局重置方案，但推荐按元素精细化控制。

JavaScript 检测方法
// 检测系统动效偏好 const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); // 初始检测 if (motionQuery.matches) { console.log('用户偏好减少动效'); // 在此禁用或简化动画 } // 监听实时变化（用户可能在系统设置中切换） motionQuery.addEventListener('change', (e) => { if (e.matches) { console.log('动效偏好已切换为：减少'); } else { console.log('动效偏好已切换为：完整'); } });
常见问题 FAQ

prefers-reduced-motion 是一个 CSS 媒体查询特性，用于检测用户是否在操作系统层面启用了"减少动效"设置。它有两个值：no-preference（默认，用户未表达偏好）和 reduce（用户希望最小化非必要的动画和运动效果）。该特性是 Web 无障碍标准（WCAG）的重要组成部分，主要服务于前庭功能障碍、晕动症患者以及对动画敏感的用户。

  • macOS：系统设置 → 辅助功能 → 显示 → 勾选"减弱动态效果"
  • Windows：设置 → 辅助功能 → 视觉效果 → 开启"动画效果"的关闭开关
  • iOS：设置 → 辅助功能 → 动态效果 → 开启"减弱动态效果"
  • Android：设置 → 辅助功能 → 移除动画（或在开发者选项中调整动画缩放）

并非完全禁用。最佳实践是：保留功能性动画（如进度条、加载指示），但大幅减少或移除装饰性动画（如弹跳、旋转、视差滚动、大范围位移）。可以将 animation-duration 设为极短时间、使用 opacity 淡入淡出替代位移动画，或直接使用 animation: none。核心原则是：动画应服务于信息传达而非纯粹装饰。

是的，JavaScript 可以通过 window.matchMedia('(prefers-reduced-motion: reduce)') 实时检测并监听变化。这在需要动态控制 JavaScript 动画（如 GreenSock、Lottie、Canvas 动画）时非常有用。此外，一些前端框架（如 React、Vue）也有对应的 Hook 或工具函数来封装该检测逻辑。

直接对SEO排名无负面影响。但良好的无障碍支持会提升用户体验（UX），间接降低跳出率、延长页面停留时间，这些都是 Google 排名算法中的积极信号。此外，Google Lighthouse 等工具会将无障碍得分作为页面质量评估的一部分。支持 prefers-reduced-motion 体现了对用户偏好的尊重，是现代Web开发的最佳实践。

prefers-reduced-motion 在所有现代浏览器中均获得良好支持，包括 Chrome 74+、Firefox 63+、Safari 10.1+、Edge 79+，以及移动端 Safari 和 Android Chrome。全球覆盖率超过 96%。对于不支持该特性的旧浏览器，动画将正常播放（即 no-preference 的默认行为），不会产生负面影响，属于优雅降级策略。
🔧 相关工具