animation首次运行闪烁的真正原因是元素按默认样式先渲染一次，再跳到@keyframes的0%状态造成跳变；必须显式定义0%关键帧所有动画属性，并设置animation-fill-mode: both（兼容性需双写），同时为动画元素添加backface-visibility: hidden前缀版本，最稳方案是JS控制类名分离初始态与动画态。
animation首次运行前闪烁的真正原因
不是动画慢，也不是浏览器卡，而是元素在渲染第一帧前，按默认样式（比如opacity: 1、transform: none）先画了一次，等动画真正开始才跳到@keyframes里定义的0%状态——这个“跳变”就是你看到的闪。
关键点在于：CSS动画默认不接管元素的初始渲染态，它只负责播放期间的插值。没显式声明起始状态，浏览器就用自己算出来的默认值，和你的0%帧对不上，必然闪。
animation-fill-mode: both 必须加，且0%关键帧必须写全
animation-fill-mode: both是唯一能同时锁住首帧（延迟期间）和末帧（播放结束后）的取值。但它只生效于@keyframes中明确定义的0%和100%，漏写任意一个属性，那个属性就仍会闪。
- 错误写法：
0% { opacity: 0; }→transform没写，加载时仍按transform: none渲染，再跳到动画里的transform: translateY(20px)，位置就闪一下 - 正确写法：
0% { opacity: 0; transform: translateY(20px); }，所有参与动画的属性都得列全 - 兼容性兜底：
animation-fill-mode: both; animation-fill-mode: forwards;，旧版Chrome（≤105）对both支持不稳定，双写可降级保底
backface-visibility: hidden 要加在动画元素本身上
尤其在Chrome和安卓WebView中，transform动画首帧抖动或背面意外渲染，常表现为一闪而过的白块或错位。这不是bug，是合成层绘制逻辑未被约束的表现。
立即学习“前端免费学习笔记（深入）”；
- 必须加在真正执行动画的元素上，比如
.slide有animation: slideIn 0.3s，那就给.slide加backface-visibility: hidden - 要带前缀：
-webkit-backface-visibility: hidden、-moz-backface-visibility: hidden、backface-visibility: hidden - 别和
overflow: hidden或filter共用——旧版安卓WebView会因此强制切回CPU渲染，反而更卡更闪
最稳方案：JS控制类名 + CSS类分离初始态与动画态
靠纯CSS总有边界情况失控，比如DOM还没挂载完、样式表还没解析完，animation就已触发。这时唯一可靠的方式是让初始态完全可控。
- HTML里先不加动画类：
<div class="element is-hidden"></div> - CSS定义初始态：
.element.is-hidden { opacity: 0; transform: translateY(20px); } - JS等
DOMContentLoaded或requestAnimationFrame后，再加动画类：el.classList.add('animate-in') - 动画类只负责过渡：
.animate-in { animation: fadeInUp 0.4s ease-out; animation-fill-mode: both; }
这个模式绕开了所有渲染时机竞态，但代价是多一次DOM操作。复杂交互动画页（比如大屏数据看板、运营活动页）建议默认走这条路，而不是赌CSS自动对齐。
