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