chrome css动画闪烁主因是合成层失控或初始状态未对齐，需用animation-fill-mode: both、显式0%关键帧、backface-visibility: hidden及避免border-color等低效属性。
Chrome 中 CSS 动画闪烁，90% 是合成层行为失控或初始状态未对齐导致的，不是浏览器 Bug，而是渲染路径没被显式约束。
animation-fill-mode: both 必须写，且 0% 关键帧要写全
Chrome 渲染第一帧前会按默认样式（比如 opacity: 1、transform: none）先画一次，等动画真正开始才跳到 0% —— 这个“跳”就是首帧闪。只写 animation-fill-mode: forwards 不够，它不管开头。
-
animation-fill-mode: both是唯一能同时锁住首帧和末帧的值 -
@keyframes里必须显式写出0%，且所有参与动画的属性（如opacity、transform、color）都要包含，漏一个就闪一个 - 旧版 Chrome（≤105）对
both支持不稳定，可降级写法：animation-fill-mode: both; animation-fill-mode: forwards; - 别用
animation-delay掩盖问题——延迟只是把闪往后推，没解决状态错位
backface-visibility: hidden 要加在真正做 transform 的元素上
哪怕只是 transform: rotateY(0deg)，Chrome 也会保留背面信息；动画帧间翻转或层级重叠时，背面可能意外渲染再裁剪，造成“一闪”。这不是视觉误差，是合成层绘制逻辑抖动。
- 加在动画直接作用的元素上，比如
.card { animation: flip 2s; }→ 就给.card加backface-visibility: hidden - 如果动画由父容器控制子元素（如
.carousel > .slide），backface-visibility: hidden必须加在.slide上，不是父容器 - 和
will-change: transform同时用时，必须配对出现；单独写will-change反而可能放大抖动 - 搭配
translateZ(0)时，避免写成transform: translateZ(0) rotateY(0deg)却漏掉backface-visibility: hidden—— 这是 Chrome 下高发组合
边框/文字类动画优先换属性，别硬刚 border-color
border-color 动画在 Chrome 中默认不走 GPU 加速，纯 CPU 重绘，高频变化时极易丢帧，表现为颜色“跳变”或短暂消失。
- 按钮边框动画改用
box-shadow模拟，或加will-change: border-color提示浏览器优化（但效果有限） - 文字淡入别用
opacity+linear缓动，改用steps(2, jump-end)实现干净开关效果 - 避免
animation-duration ，这已接近人眼视觉暂留极限，易被识别为闪烁而非流畅动画 - 如果必须用
border-width动画，确保父容器没有overflow: hidden与动画边界冲突，否则裁剪会引发额外跳帧
检查是否真触发了硬件加速图层
写了 transform 和 will-change 不代表一定走了合成通道——Chrome 可能因布局上下文（比如父元素是 display: flex 且子项没设 align-self）降级回主线程渲染。
- 打开 Chrome DevTools →
More Tools → Layers，悬停动画元素，确认是否有独立图层生成 - 同时打开
Rendering面板，勾选Paint flashing和Layer borders：动画过程中若仍有大面积绿色闪动，说明还在重绘；无闪动 + 有蓝边图层 = 优化生效 - 移动端或 Safari 15–16 中，
backface-visibility效果弱，此时更要检查animation-fill-mode和关键帧首尾是否一致 - 多个动画叠加时，每个都要单独声明
animation-fill-mode，不能靠继承或父级设置覆盖
真正稳定的动画，从来不是靠堆砌属性，而是每一步都明确告诉浏览器：“这个元素从哪来、去哪、中间怎么走、停在哪”——少一个环节，Chrome 就可能按自己理解补全，然后你就看到一闪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
