CSS移动端适配加载动画优化技巧

硬件加速需要遵循“专款专用”原则，仅对正在动画中的元素临时启用，并配合 transform 和 opacity 使用，同时务必禁用 left、top、height 等会触发布局的属性。否则，动画掉帧、卡顿是轻的，在低端 Android 设备上，甚至可能直接卡死。

先记住一个核心结论：只对正在动画的元素临时启用硬件加速，配合 transform 和 opacity 动画，禁用 left/top/height 等触发布局的属性——否则动画会掉帧、卡顿，甚至在低端 Android 上直接卡死。

为什么 translate3d(0, 0, 0) 不能全局加在 .loading 类上

它并非“加速开关”，真实作用是向浏览器申请一个独立的合成层。如果滥用，GPU 显存会急剧上升，尤其在 Android WebView 中，内存增长反而导致滚动更卡、动画速度变慢。更麻烦的是，如果父容器带有 overflow: hidden、filter 或 opacity < 1，这些属性会压制子元素的提层行为，translate3d 便形同虚设。

正确的做法是：

• 只在动画开始前 1 帧加上：在 el.style.transform = 'translateY(0)' 前，先执行 el.style.willChange = 'transform'
• 动画结束后，监听 transitionend 事件，立即把 willChange 设回 auto
• 对于静态旋转图标（如 @keyframes spin），应单独加一个类，比如 .spin-3d { transform: translate3d(0, 0, 0); }，千万别写死在基础样式里

移动端旋转 Loading 必须显式设置 transform-origin

iOS 12 到 14 的 WebKit 存在一个隐蔽的 bug：如果父容器带有 perspective 或其他 transform，而子元素没有显式设置 transform-origin，旋转动画会在中途卡住，或者直接跳回 0 度。

因此，以下几点必须注意：

• transform-origin: center 必须写，不能依赖默认值
• 避免使用 from { } + to { } 以外的多关键帧，旧版 Safari 解析时容易出问题
• 动画时长建议设为 0.8s，这个时长比 1s 更符合人眼对流畅感的感知阈值
• 别用 currentColor 控制边框色——系统深色模式切换时，它不会实时响应，得手动 toggle class 或触发重绘才行

列表项交错加载动画别靠 JS 滚动监听

滚动时逐项触发 animation 或用 JS 判断视口，这在低端 Android 上会造成频繁的重排重绘，直接导致掉帧。

以下方案值得参考：

• 用 :nth-child(n) 配合 transition-delay 实现 CSS 原生交错，总延迟控制在 ≤ 600ms 以内
• 必须包裹在 @media (prefers-reduced-motion: reduce) 里做降级处理，同时重置 transform 和 opacity，否则残留的位移会导致内容错位
• 入场只加一个类（如 .is-visible），靠 transition 触发效果，千万别写 transition: all——一旦改了 margin 或背景色，整段动画就退回到 CPU 渲染，性能全无

图片懒加载动效要防 iOS Safari 的“唤醒延迟”

iOS Safari 的 IntersectionObserver 在页面刚加载时可能不触发，这不是 bug，而是 WebKit 的 lazy rendering 行为所致。

应对策略如下：

• DOMContentLoaded 事件后，延迟 16ms 调用一次 observer.takeRecords()，强制初始化观察器
• 初始占位必须用 aspect-ratio + background-color，禁用 height: auto，否则加载瞬间的重排会导致图片抖动
• 动效只使用 opacity 和 transform，并提前加上 will-change: opacity, transform
• 回调里绝对不要读取 offsetHeight 或 getBoundingClientRect()，否则同步回流会卡住动画帧，性能直接崩掉

很多时候，真正的卡顿并不出在动画本身，而是出在提层时机、父容器压制、系统偏好未处理、或 iOS 特定渲染行为上。写完动画后，建议打开 Chrome DevTools → Rendering → Layer Borders，看看有没有绿色边框出现。如果没有，那就要回头排查：是不是被 overflow 拦住了？还是关键帧里混进了 width 这种危险属性？