说实话，iOS 低电量模式这个特性，坑过不少人。

它的核心机制是系统级强制把 prefers-reduced-motion: reduce 给打开了。结果 Safari 直接无视所有 CSS 动画，@keyframes、transition、甚至 will-change 触发的硬件加速，统统失效。这不是 Bug，是 iOS/iPadOS 的硬性限制，代码层面完全绕不过去。

动画失效的典型表现

• 页面滚动变卡顿
• 加载指示器不转了
• 折叠菜单没过渡了
• 按钮点下去直接就跳状态了

这些症状不是你的代码写错了，而是 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 不够

很多人以为只要在媒体查询里写上 animation: none 就万事大吉，但真相远不止这些：

• transition: all 0.3s 这类声明即使不执行动画，它仍占据样式计算位置，导致 transitionend 事件永远不触发
• 必须写成 transition: none，不能留空、注释掉、也不能写成 transition: none 0s
• 纯装饰性动画，比如 loading 旋转图标，要补上终态样式：animation: spin 2s infinite 配上 transform: rotate(0)，否则降级后元素可能卡在半空中
• will-change: transform 在 reduce 状态下不仅无效，还可能引发渲染异常，建议直接移走

JS 动画逻辑也要适配

如果你在 JS 里控制动效组件，比如手风琴菜单或模态框，不能只在初始化时判断一次 matchMedia 结果：

• 用户可能在页面运行中随时切换低电量模式，需要监听实时变化
• 推荐写法：motionQuery.addEventListener('change', handler)（Safari 14+）或旧版 addListener
• 更稳妥的方法是给 加一个 reduced-motion 的 class，CSS 层统一接管开关，JS 只负责切换这个 class
• 第三方动效库，比如 Framer Motion，默认不响应这个变化，需要手动配置 transition={{ duration: 0 }} 或传 disable: m

《夸克》非常好用的免费AI浏览器

下载APP查看