按钮动画闪烁可通过 will-change 配合 transform/opacity 属性优化：仅在动画前动态启用 will-change: transform，动画后设为 auto，并用 transform 替代 left/top 等触发布局的属性，避免长期开启。
按钮动画闪烁，通常是因为浏览器在动画过程中频繁触发重排（reflow）和重绘（repaint），尤其是涉及 left、top、width、height 或 opacity 以外的属性时。而 will-change 是一个明确告诉浏览器“这个元素即将变化”的提示，能让浏览器提前为该元素创建独立的合成层（compositing layer），从而把动画交给 GPU 处理，大幅减少闪烁和卡顿。
哪些属性适合加 will-change？
不是所有属性都适合，也不是所有动画都需要。真正起效的是那些能触发合成层提升的属性，比如：
-
transform（尤其是translateX/Y/Z、scale、rotate） opacity
避免对 left、top、background-color、color 等直接触发布局或绘制的属性使用 will-change，它们无法受益，反而可能增加内存开销。
正确写法：只在动画前临时启用
will-change 不是 CSS “开关”，长期开启会持续占用 GPU 内存。推荐用 JavaScript 动态控制：
立即学习“前端免费学习笔记（深入）”；
button.addEventListener('mouseenter', () => {
button.style.willChange = 'transform';
});
button.addEventListener('animationend', () => {
button.style.willChange = 'auto';
});或者配合 CSS 动画生命周期：
- 在
:hover或动画开始前（如@keyframes的0%帧）设置will-change: transform - 动画结束后立即设回
auto或移除 —— 避免常驻
配合 transform 替代位移类属性
如果按钮闪烁源于用 left: 10px 实现移动，立刻换成 transform: translateX(10px)。再加 will-change: transform，就能稳定走合成通道：
.btn:hover {
transform: translateX(4px);
will-change: transform; /* 仅 hover 时生效 */
}注意：不要在默认状态就写 will-change: transform，否则浏览器从加载就开始准备图层，得不偿失。
检查是否真的提升了合成层
在 Chrome DevTools 中打开 Layers 面板（More Tools → Layers），悬停按钮，观察是否有独立图层生成；同时打开 Rendering 面板，勾选 “Paint flashing” 和 “Layer borders”，看动画时是否还有大面积绿色闪动（表示重绘）。没有闪动 + 有独立图层 = 优化生效。
基本上就这些。will-change 不是万能药，但搭配 transform/opacity 使用，能稳住按钮动画的流畅性，消除闪烁也并不复杂，只是容易忽略时机和范围。
