首帧闪烁的根本原因是初始状态未对齐：浏览器先按默认样式渲染首帧，待动画0%关键帧生效时发生跳变；必须在@keyframes中显式定义完整0%帧并配合animation-fill-mode: both才能解决。
首帧闪烁的根本原因：初始状态未对齐
不是动画写错了，而是浏览器在渲染第一帧前，按默认样式（比如 opacity: 1、transform: none）先画了一次，等动画的 0% 关键帧生效时才跳过去——这个“跳”就是你看到的闪。关键在于：CSS 动画不会自动接管元素的初始样式，除非你明确告诉它该从哪开始。
- 必须在
@keyframes中显式写出0%帧，且覆盖所有将被动画的属性（例如同时改opacity和transform，就都要写进0%） - 仅靠
animation-fill-mode: forwards不够——它只管结尾，不管开头 - 省略
animation-fill-mode或只设为forwards，等于放任首帧“裸奔”
真正管用的填空方案：animation-fill-mode: both
both 是唯一能同时锁住首帧和末帧的值：动画开始前，元素就按 0% 的样式渲染；结束后，停在 100% 的状态。但它不是万能钥匙——前提是 0% 必须存在且完整。
.fade-in {
animation: fadeIn 0.4s ease both;
}
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(8px); } / 必须写全 /
100% { opacity: 1; transform: translateY(0); }
}
- 如果漏写
0%中的transform，即使用了both，首帧仍会按默认transform: none渲染，导致位置跳变 - 旧版 Safari（≤15.6）对
both支持不稳定，可加降级：animation-fill-mode: both; animation-fill-mode: forwards; - 不要用
animation-delay来“掩盖”首闪——延迟只是把问题往后推，没解决状态错位
边框/文字类动画额外踩坑点
边框颜色（border-color）或文字闪烁（opacity 跳变）这类动画，除了首帧对齐，还容易因渲染机制出问题：Chrome 对 border-color 变化不启用硬件加速，opacity 频率过高则触发人眼不适。
- 边框动画优先用
box-shadow模拟，或给容器加will-change: border-color提示浏览器优化 - 文字闪烁别用
linear缓动，改用steps(2, jump-end)实现干净利落的开关效果 - 避免
animation-duration小于0.3s，这已接近视觉暂留极限，易引发光敏反应
图片背景动画的首次闪屏：资源加载才是真凶
如果动画里切的是 background-image，首帧闪白不是 CSS 问题，是图片还没加载完。浏览器先画了透明/默认背景，等图下来再重绘——这个间隙就是闪。
立即学习“前端免费学习笔记（深入）”；
- 预加载图片：用
new Image().src = 'xxx.jpg'在 JS 中提前触发下载 - 初始隐藏元素：
opacity: 0+visibility: hidden，等图片加载完成再用 JS 切回可见 - 强制通知浏览器优化：
will-change: background-image（仅对已知会变的元素加，别滥用）
首帧闪烁看着小，但根子扎在「浏览器渲染流水线」和「开发者对初始状态的假设」之间。最常被忽略的，就是以为写了 @keyframes 就万事大吉，却忘了它只是动画剧本，而 0% 帧才是演员上台前的站位指令。
