为什么CSS动画中opacity变化会导致闪烁
CSS动画里opacity属性控制元素透明度，当变化幅度过大时，浏览器渲染层面会出现帧率波动。比如在短时间内让opacity从0直接跳到1，中间过渡帧的计算容易出现偏差，加上部分浏览器对透明度渲染的优化不足，就会产生明显的闪烁感。另外如果动画同时触发其他重排重绘操作，也会加剧闪烁问题。
降低opacity变化幅度解决闪烁问题
调整opacity变化区间
不要使用0到1的全区间变化，可以把起始和结束的透明度控制在更小的范围。比如让元素从0.2变化到0.9，既保留了透明度变化的效果，又减少了浏览器渲染的压力，闪烁感会明显降低。
下面是一个优化前后的对比示例：
/* 优化前：全区间变化，容易闪烁 */
.blink-bad {
animation: blinkBad 1s infinite;
}
@keyframes blinkBad {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* 优化后：缩小变化幅度，闪烁减弱 */
.blink-good {
animation: blinkGood 1s infinite;
}
@keyframes blinkGood {
0% { opacity: 0.2; }
100% { opacity: 0.9; }
}
搭配动画缓动函数
除了调整opacity的变化幅度，还可以给动画添加缓动函数，让透明度的变化更平滑，避免突然的跳变。常用的ease-in-out缓动函数就很适合透明度动画场景。
.blink-smooth {
animation: blinkGood 1s ease-in-out infinite;
}
@keyframes blinkGood {
0% { opacity: 0.2; }
100% { opacity: 0.9; }
}
其他辅助优化技巧
- 使用
will-change: opacity提前告知浏览器该元素会有opacity变化，让浏览器提前做好渲染优化。 - 避免opacity动画和其他会触发重排的属性（比如width、height、top、left）同时变化，减少渲染压力。
- 适当延长动画时长，给浏览器足够的帧计算时间，避免短时间内的高频变化导致闪烁。
注意事项
如果降低opacity变化幅度后还是有明显闪烁，可以检查是否存在其他影响渲染的因素，比如元素层级、父元素的overflow属性设置等。另外部分旧版本浏览器对CSS动画的支持不完善，也可以考虑添加浏览器前缀提升兼容性。
/* 兼容旧版本浏览器的写法 */
.blink-good {
-webkit-animation: blinkGood 1s ease-in-out infinite;
animation: blinkGood 1s ease-in-out infinite;
-webkit-will-change: opacity;
will-change: opacity;
}
@-webkit-keyframes blinkGood {
0% { opacity: 0.2; }
100% { opacity: 0.9; }
}
@keyframes blinkGood {
0% { opacity: 0.2; }
100% { opacity: 0.9; }
}