根本原因是ios/ipados/macos低电量模式强制启用prefers-reduced-motion: reduce，safari直接跳过所有css动画渲染（含@keyframes、transition、will-change），属系统级硬性限制，无法绕过；需用devtools模拟验证，显式重置transition为none、补终态样式、移除will-change，并监听change事件动态切换class。
低电量模式下Safari网页动画卡顿、加载指示器停转、折叠展开无过渡效果，根本原因是系统强制启用 prefers-reduced-motion: reduce，Safari 直接跳过所有 CSS 动画渲染流程，包括 @keyframes、transition 和 will-change 触发的硬件加速——这不是 Bug，而是 iOS/iPadOS/macOS 的硬性限制，无法通过前端代码绕过。
确认是否由低电量模式触发动画失效
别靠猜测判断，用 Safari DevTools 快速验证：
在 Safari 中打开目标网页 → 按 Command+Shift+P（Mac）或 Ctrl+Shift+P（Windows/Linux）→ 输入 “reduced” → 选择 “Emulate CSS prefers-reduced-motion” → 切换为 reduce → 刷新页面。若动画立即消失，且 window.matchMedia('(prefers-reduced-motion: reduce)').matches 返回 true，即可确认根源在此。
为什么只加 animation: none 不够
很多人以为在媒体查询里写 @media (prefers-reduced-motion: reduce) { * { animation: none; } } 就万事大吉，但实际会出问题：
transition: all 0.3s 这类声明即使不执行动画，仍保留在样式计算中，导致 transitionend 事件永不触发，JS 逻辑卡死。
必须显式写成 transition: none，不能留空、不能注释掉、也不能写成 transition: none 0s——后者仍会被解析为合法 transition 声明，照样阻塞事件流。
纯装饰性动画（如 loading 旋转图标）要补上终态样式，例如原 animation: spin 2s infinite 必须配 transform: rotate(0)，否则降级后元素可能卡在中间角度，视觉错乱。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
适配 JS 动效组件的正确做法
如果你用 JS 控制手风琴菜单、模态框等动效，不能只在初始化时判断一次 matchMedia 结果：
第一步：创建媒体查询对象
第二步：监听 change 事件
第三步：动态切换 class 或直接禁用动画逻辑
推荐统一给 添加 reduced-motion class，CSS 层统一接管开关，JS 只负责切换 class。第三方库（如 Framer Motion）默认不响应此变化，需手动传入 transition={{ duration: 0 }} 或 disable: m 参数。
关闭 Safari 的 60fps 渲染限制开关（仅限 ProMotion 设备）
该操作可让 iPhone 13 Pro 及更新款、iPad Pro、MacBook Pro 在低电量模式下仍动态启用 120Hz 渲染，但前提是设备支持 ProMotion 且系统为 iOS/iPadOS/macOS 18.0+：
方法一（iOS/iPadOS）：
进入【设置】→【Safari 浏览器】→【高级】→【功能开关】→ 搜索 “60” → 找到「Prefer Page Rendering Updates near 60fps」→ 关闭开关 → 双击 Home 键或从底边向上滑动并停顿，上滑彻底关闭 Safari 进程，再重新启动。
方法二（macOS）：
打开 Safari → 【Safari】→【设置】→【进阶】→ 勾选【显示网页开发者功能】→ 点击顶部【开发】→【功能标志】→ 搜索 “Prefer Page Rendering Updates near 60fps” → 取消勾选 → 按 Cmd + Q 完全退出 Safari，再重新启动。
