CSS过渡闪烁主因是重排/重绘，非timing function；应改用transform/opacity等合成属性，避免display/visibility突变，并确保元素独立成层。
CSS 过渡触发时出现闪烁，通常不是 timing function（如 ease 或 linear）本身导致的，而是因为浏览器在动画起始/结束帧中触发了重排（reflow）或重绘（repaint）的不稳定行为。把问题归因于 easing 函数是常见误解——ease 和 linear 都不会直接引发闪烁，但它们可能暴露底层渲染问题。
检查是否触发了 layout（重排）
如果过渡属性涉及 width、height、top、left、margin 等会触发 layout 的属性，浏览器必须重新计算整个布局，容易造成卡顿和视觉闪烁。
- ✅ 推荐改用只触发合成（compositor）的属性：如
transform（translateX,scale,rotate）和opacity - ❌ 避免对
display、visibility（切换瞬间）、font-size、padding等做过渡 - ? 可用 Chrome DevTools 的 “Rendering” 面板勾选 “Paint flashing” 或 “Layout Shift Regions”，观察闪烁是否伴随大面积高亮
确保元素拥有独立的合成层
即使用了 transform 和 opacity，若元素未被提升为合成层（layer），仍可能在主线程渲染，导致掉帧和闪烁。
- ✅ 强制创建合成层：添加
will-change: transform;（仅在需要时，避免滥用）或transform: translateZ(0); - ⚠️ 注意：
will-change不要提前写死在静态样式中，建议 JS 触发前动态添加，动画结束后移除 - ? 在 DevTools 的 “Layers” 面板中确认目标元素是否已单独成层
避免 transition 与 display/visibility 冲突
这是最典型的闪烁诱因：在 transition 执行中突然设置 display: none，或用 visibility: hidden 切换但未预留空间，会导致元素瞬间消失并破坏过渡流程。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确做法：用
opacity+transform控制显隐；动画结束后再设display: none - ✅ 或使用
visibility+transition，但需配合opacity并确保容器高度稳定（如固定 height 或使用max-height过渡） - ? 不要这样：
transition: all 0.3s; ... hover { display: none; }—— display 无法过渡，会立即生效
检查硬件加速是否被意外禁用
某些 CSS 规则（如 filter、backdrop-filter、过度嵌套的 transform）可能让浏览器降级到软件渲染，尤其在旧版 Safari 或移动端 WebView 中易出问题。
- ✅ 简化动画逻辑：优先用
transform+opacity，避免叠加多个filter - ✅ 测试环境：在真机或模拟器中验证，不要只依赖桌面 Chrome
- ? 若必须用
filter，可尝试加transform: translateZ(0)强制启用 GPU 加速（部分场景有效）
