最推荐用@media (prefers-reduced-motion: reduce)全局关闭动画，重置animation、transition、transform、opacity为none或1，并设will-change:auto；覆盖范围需全，对非关键动效降级，首屏禁用动效，JS兜底检测并动态添加no-motion类。
直接用系统级偏好设置拦截，比 JS 判断更早、更稳、不卡顿。
用 @media (prefers-reduced-motion: reduce) 全局关闭高开销动画
这是最推荐的方式——它响应用户在系统设置里主动开启的“减少动画”选项（iOS 设置 > 辅助功能 > 动态效果；安卓设置 > 辅助功能 > 动画），浏览器会在 CSS 解析阶段就跳过动画逻辑，无需等 JS 加载执行。
-
必须重置的关键属性：
animation: none !important（不能写0s或none 0s，仍有解析开销）transition: none !important（避免all 0.3s类隐式过渡）transform: none !important（防止 translate/rotate 等触发合成层）opacity: 1 !important（避免 fade-in 类淡入动画残留） -
慎用
will-change：低配机上它反而加重 GPU 压力，此处应设为will-change: auto !important -
覆盖范围要全：把规则写在全局样式最底部，或用
:root+!important确保能压过组件库自带动画（如 Ant Design Mobile、Vant 的入场动效）
对非关键动效做运行时降级
有些动画是业务强依赖（比如进度条、加载指示器），不能完全禁用，但可以简化。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 将复杂 SVG 动画、Lottie 渲染降级为静态图标 + 简单 CSS
opacity切换 - 滚动触发动效（如 scroll reveal）改用 class 切换，而非
animation：.reveal { opacity: 0; transform: translateY(20px); }.reveal.active { opacity: 1; transform: translateY(0); transition: none; } - 同一时间活跃动画数控制在 3~5 个以内，用
requestIdleCallback批量调度非紧急动效
首屏不动效 + 骨架屏替代视觉等待
老旧手机连骨架屏动画都可能卡顿，干脆去掉所有加载动效，用静态结构撑住布局。
- 首屏区域禁用所有
@keyframes和transition，CSS 中直接写死状态（如按钮默认高亮、卡片无 hover 变化） - 用固定宽高 +
aspect-ratio占位图片/模块，避免加载时布局抖动 - 骨架屏用纯色块（
background-color）代替渐变或闪烁动画，减少重绘压力
兜底：JS 检测 + 强制关闭动态内容
CSS 媒体查询无法覆盖动态插入的 DOM（比如弹窗、懒加载模块），需 JS 补充拦截。
- 监听系统偏好变化：
window.matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', handler) - 新插入元素自动加降级 class：
el.classList.add('no-motion')，对应 CSS 规则同上 - 对已知高消耗库（如 Three.js、Mapbox）在检测到 reduced motion 时直接跳过初始化
