动画加载闪一下的本质原因是初始状态未显式声明，导致浏览器按默认值渲染，与动画0%帧不一致；需用animation-fill-mode: both配合明确定义的0%关键帧，或采用CSS类+JS控制初始状态。
动画加载闪一下的本质原因
页面首次渲染时，animation 立即触发，但此时元素可能还没完成 CSS 样式计算或 DOM 布局，导致浏览器先显示默认状态（比如 opacity: 1 或原始位置），再跳到动画第一帧——这个“跳变”就是你看到的“闪一下”。关键不是动画慢，而是**初始状态没显式声明**，浏览器按默认值渲染，和动画起始帧不一致。
用 animation-delay + animation-fill-mode: both 治标
延迟动画本身不能解决闪动，但配合 animation-fill-mode: both 可让元素在动画开始前就保持 @keyframes 中 0% 的状态。前提是：你必须在 @keyframes 里明确定义 0% 关键帧，且该帧要覆盖所有将被动画的属性。
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.element {
animation: fadeInUp 0.4s ease-out;
animation-delay: 0.2s;
animation-fill-mode: both; / 必须加 /
}
-
animation-delay只控制何时开始，不改变初始渲染逻辑 - 缺
animation-fill-mode: both，即使写了0%，元素仍会先显示未动画时的样式（比如opacity: 1） - 如果动画涉及多个属性（如
opacity、transform、color），0%必须全部写全，漏一个就可能闪那个属性
真正治本：CSS 类控制 + JS 触发时机
最稳的方式是让元素初始完全不可见（或处于目标起始态），等 DOM 就绪、样式计算完成后再加动画类。适合首屏关键动画。
.element {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s, transform 0.4s;
}
.element.is-loaded {
opacity: 1;
transform: translateY(0);
}
- 不用
@keyframes，靠transition更可控；初始状态直接写死在普通样式里 - JS 在
DOMContentLoaded或requestAnimationFrame后添加is-loaded类 - 如果需兼容老浏览器（IE10+），
transition比animation更可靠 - 注意：若元素本身有内联
style覆盖了初始opacity或transform，也会导致闪动——得清空或用!important（不推荐）覆盖
容易被忽略的坑：伪元素、继承值与重排触发
有些闪动不是动画本身问题，而是动画属性触发了意外重排（reflow）或继承了父级值。例如：
立即学习“前端免费学习笔记（深入）”；
-
transform动画中混用top/left：top触发重排，transform不触发，两者混用可能导致布局抖动 - 伪元素
::before也参与动画，但没设content或初始opacity，它会从无到有“弹出” - 父容器用了
will-change: transform，但子元素动画属性没对齐，反而引发额外合成层切换 - 使用
rem或%做动画值时，父容器尺寸尚未稳定（比如图片没加载完），导致0%计算错误
调试时打开 Chrome DevTools 的 Rendering → Paint Flashing 和 Layers 面板，看是否有多余重绘或图层分裂——这些才是隐藏的闪动源头。
