iOS低电量模式下CSS动画被强制禁用，需通过@media (prefers-reduced-motion: reduce)统一设animation/transition为none，并用opacity+visibility控制显隐，JS监听matchMedia动态切换class以确保状态正确呈现。
iOS低电量模式下CSS动画被静音怎么办
iOS低电量模式会强制将 prefers-reduced-motion: reduce 设为启用状态，且**无法通过代码绕过或覆盖**——这不是bug，是系统级限制。所有 @keyframes、transition、animation 都会被 Safari 直接忽略，连 will-change 或 transform 触发的硬件加速动画也无效。
如何检测并优雅降级动画逻辑
不能靠 UA 判断，必须用媒体查询实时响应系统偏好。重点不是“禁用动画”，而是“把动画行为转为即时状态变更”：
- 用
@media (prefers-reduced-motion: reduce)包裹所有动画声明，内部设为animation: none、transition: none - 对依赖动画反馈的交互（如折叠面板、模态框淡入），改用
opacity: 1 / 0+visibility: visible / hidden组合控制显隐，避免留白或布局抖动 - JavaScript 中监听
window.matchMedia('(prefers-reduced-motion: reduce)')的change事件，动态切换 class（例如加reduced-motion根类），让 CSS 层统一接管
transition 和 animation 的参数陷阱
很多人以为只写 transition: all 0.3s 就够了，但在 reduced motion 下，这个声明依然存在，只是不生效——这会导致 JS 判断元素是否“已过渡完成”时出错（比如监听 transitionend 事件永远不触发）：
- 务必在 reduced motion 媒体查询内重置为
transition: none，而不是留空或注释掉 - 避免用
animation: spin 2s infinite这类纯装饰性动画；若必须存在，应在 media 查询中设animation: none并补上transform: rotate(0)保证终态一致 -
will-change: transform在 reduced motion 下不会提升性能，反而可能引发渲染异常，建议一并移除
第三方库（如 AOS、Framer Motion）的兼容处理
这些库默认不感知 prefers-reduced-motion，需手动干预：
立即学习“前端免费学习笔记（深入）”；
- AOS：初始化时传
{ disable: window.matchMedia('(prefers-reduced-motion: reduce)').matches } - Framer Motion：全局配置
layoutRoot={false}并在组件中用animate={{ opacity: 1 }} transition={{ duration: 0 }}强制跳过动画 - 自研滚动触发动画？别依赖
IntersectionObserver后直接加animate()，先查matchMedia结果，true 就直接设终态样式
最易被忽略的是：动画被禁后，某些视觉反馈（比如按钮点击态、加载指示器）会彻底消失。得把“动效逻辑”和“状态逻辑”拆开——前者负责过渡，后者负责终态呈现。否则用户在低电量模式下会感觉页面“卡住”或“没响应”。
