初次加载transition闪动是因首帧未预热合成层，需用transform: translateZ(0)提前触发硬件加速，并确保backface-visibility: hidden在其后声明，且避免display: none销毁图层。
为什么初次加载时transition会闪一下
根本不是动画写错了，而是浏览器在首帧渲染时没来得及准备好合成层。opacity 或 transform 过渡本身没问题，但若元素初始状态没触发硬件加速，第一帧就可能走 CPU 渲染路径——尤其在 Safari 和旧版 Android WebView 中，表现为“啪”地白一下或跳一下。
这不是 JS 控制时机的问题，也不是 CSS 写漏了 transition，而是图层创建滞后于绘制帧。
backface-visibility: hidden 单独加无效的三个原因
很多人复制粘贴 backface-visibility: hidden 就跑，结果毫无作用。它必须满足前提才能起效：
-
transform属性必须已存在（哪怕只是transform: translateZ(0)），且必须在backface-visibility之前声明 - 父容器不能有
will-change: auto或被filter/mask拖累，否则子元素的图层会被合并或降级 - 在 iOS 16+ 和 Android Chrome 115+ 中，如果元素用
display: none初始隐藏，再切为block，backface-visibility会被忽略——因为图层已被销毁
真正起作用的最小可行组合
别堆砌属性，只留最关键的两条，顺序不能错：
立即学习“前端免费学习笔记（深入）”；
.fade-in {
transform: translateZ(0);
backface-visibility: hidden;
transition: opacity 0.3s, transform 0.3s;
}
.fade-in.active {
opacity: 1;
transform: translateZ(0) scale(1);
}
注意：translateZ(0) 必须出现在初始类中（不是只在 .active 里），否则无法预热图层；scale(1) 是为了确保 transition 触发时不因 transform 值未变而跳过动画。
如果用在 Vue/React 的条件渲染中，避免用 v-if 或 display: none 控制显隐，改用 opacity: 0; pointer-events: none; + transition 更稳妥。
移动端 Safari 必须绕开的坑
Safari 对合成层更敏感，几个实操红线：
- 别和
will-change: transform同时用在一个元素上——Safari 可能直接忽略backface-visibility - 别在
position: fixed元素上单独依赖backface-visibility，必须加transform: translateZ(0)+ 显式z-index - 如果用了 CSS-in-JS（比如 Emotion），确认生成的 CSS 中
transform确实在backface-visibility前面，压缩工具可能打乱顺序
最保险的初始化方式：用 requestAnimationFrame 在首帧前强制建层
element.style.transform = 'translateZ(0)';
requestAnimationFrame(() => {
element.style.transform = '';
element.classList.add('fade-in');
});
这个动作不能省——它让浏览器在 layout 阶段就决定“这个元素我要单独建一个合成层”，而不是等 transition 开始时才手忙脚乱去分配。
