硬件加速应仅对动画元素临时启用，配合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 这种危险属性。
