最推荐用@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 时直接跳过初始化