如何用CSS优化移动端适配的加载动画

硬件加速应仅对动画元素临时启用，配合transform和opacity，禁用触发布局的属性；translate3d(0,0,0)非全局开关，需按需提层并及时清理will-change，避免GPU显存浪费与父层压制。

只对正在动画的元素临时启用硬件加速，配合 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 后立刻设回 el.style.willChange = 'auto'
• 静态旋转图标（如 @keyframes spin）应单独加类，例如 .spin-3d { transform: translate3d(0, 0, 0); }，而非写死在基础样式里

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

iOS 12–14 WebKit 有个隐藏 bug：没设 transform-origin 时，若父容器有 perspective 或其他 transform，旋转动画会中途卡住或跳回 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 这种危险属性。