内联关键css是防闪底线，必须用标签置于最顶部、体积≤10kb（gzip前）、禁用media属性；否则首屏必fouc。
CSS样式闪烁不是“动画没写好”，而是浏览器在关键帧之间没能稳定维持渲染状态。最可靠的做法是把首屏必需样式内联、用类名切换主题、给动画元素预热合成层——这三步做完，90%的闪都消失了。
为什么内联关键CSS是硬性要求
不内联，其他所有优化都是补救。浏览器首次绘制前必须拿到首屏用到的选择器（比如.header、.hero、:root里的基础变量），否则必然FOUC。这不是加载慢，是压根没参与渲染流程。
-
<style></style>标签必须放在最顶部，早于任何<script></script>或<link> - 体积不能超过10KB（gzip前），否则会反向阻塞HTML解析
- 不能带
media属性，比如media="(prefers-color-scheme: dark)"，否则浏览器直接跳过阻塞逻辑 - 别手动维护——用
critters（Vite插件）或critical（CLI）自动生成，否则上线后一改样式就失效
为什么用class切换主题比setProperty更稳
直接调document.documentElement.style.setProperty('--bg', '#121212')会触发同步变量解析链：查fallback → 计算颜色 → 插值过渡。Safari尤其卡在这一步，var(--bg)用在linear-gradient里甚至要等下一帧才生效，视觉上就是“闪一下”。
- 把变量定义拆成两套：
:root一套默认值，.dark-theme类覆盖整套变量 - JS只做
document.documentElement.classList.toggle('dark-theme')，这个class必须加在document.documentElement上，不是body - 所有
var()都要带fallback：color: var(--text, #333)，避免未定义时降级成transparent崩掉颜色 - 禁用
calc(var(--text) * 0.9)这类嵌套，它会彻底禁用transition
为什么Safari和Chrome动画还闪，得加translateZ(0)
WebKit对合成图层复用太保守，元素做transform或opacity过渡时，若没明确信号告诉浏览器“这个元素要稳定成层”，就会在帧之间反复销毁/重建图层，导致白边、文字抖动。Chrome策略宽松，所以看着“正常”。
-
backface-visibility: hidden必须加在「正在动画的元素本身」上，加在父容器无效 - 必须紧接在
transform声明之后，推荐写法：transform: translateZ(0); backface-visibility: hidden; - 真机测试比DevTools准得多——有些闪烁只在iPhone上出现，且仅在首次动画或滚动后发生
- 打开Safari Web Inspector → Layers面板，确认目标元素是否真的单独成层；没成层，加什么都白搭
为什么:hover高频进出还会闪
根本不是缓动函数问题，而是鼠标在边缘反复进出，导致浏览器不断中断当前动画、重置状态再启动新过渡。典型场景是导航下划线#indicator移动后刚好挡住鼠标，触发自身:hover失效，又弹回原位，形成死循环。
-
#indicator必须加pointer-events: none，它仍能被a:hover ~ #indicator驱动，但不再抢夺鼠标事件 -
transition必须写在常态规则里（非:hover中），否则移出时无动画 - 只对合成属性做过渡：
transform、opacity可以，width、margin-top、border-color不行 - 禁用
transition: all——哪怕只多了一个未声明的border-color变化，也会被强行插值，引发抖动
真正卡点不在怎么写transition，而在判断「这个状态是否真的需要动」。很多闪烁，本质是给不该动的地方加了动效——比如页脚文字颜色变化、静态图标旋转，它们只会分散注意力，不提供任何交互价值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
