使用linear缓动可避免opacity动画闪烁，因匀速变化减少视觉跳跃；避免与重排属性同用，仅保留opacity和transform以提升性能；通过transform: translatez(0)或will-change启用硬件加速，减轻主线程负担；同时检查父容器的overflow、filter等干扰样式，确保渲染稳定。
在使用 CSS 的 animation 配合 opacity 实现透明度渐变动画时，有时会出现视觉上的“闪烁”现象。这通常不是代码语法错误，而是渲染机制或动画曲线选择不当导致的。通过合理设置动画缓动函数（如 linear 或 ease）并优化动画属性，可以有效避免这类问题。
1. 使用 linear 缓动保持匀速过渡
默认的 ease 动画曲线会在开始和结束阶段加速或减速，这种非线性变化在低帧率或复杂页面中容易引起感知上的不连贯，看起来像“闪烁”或“抖动”。
改用 linear 可让 opacity 变化更平滑稳定：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
<p>.element {
animation: fadeIn 0.3s linear forwards;
}</p>linear 确保每一帧的变化量一致，减少因速度波动带来的视觉跳跃。
立即学习“前端免费学习笔记（深入）”；
2. 避免与其他重绘属性同时动画
如果 opacity 和 transform、left、top 等触发重排或重绘的属性一起动画，浏览器可能无法高效合成图层，导致闪烁。
建议：
- 只对 opacity 和 transform 做动画，它们由合成器线程处理，性能更好
- 避免同时改变 display、visibility 或 layout 相关属性
3. 启用硬件加速提升渲染表现
为动画元素启用 GPU 加速，可减少主线程压力，使 opacity 动画更流畅：
.element {
animation: fadeIn 0.3s linear forwards;
transform: translateZ(0);
/* 或者 */
will-change: opacity;
}
注意：will-change 不宜滥用，仅用于明确要动画的元素。
4. 确保父容器无干扰样式
某些父级样式可能导致子元素透明度渲染异常，例如：
- 父元素设置了 overflow: hidden 并伴随裁剪动画
- 使用了 filter 滤镜（如 blur）
- 开启了 backface-visibility: hidden 但结构复杂
检查并简化这些样式，有助于消除闪烁。
基本上就这些。用 linear 控制节奏，避免混合重绘属性，适当启用硬件加速，多数 opacity 闪烁问题都能解决。不复杂但容易忽略细节。
