(jQuery/CSS) 模糊效果消失时出现烦人的闪烁问题求助

嘿，我之前也碰到过类似的模糊动画闪烁问题，大概率是浏览器渲染层面的小坑！先帮你捋捋可能的原因和解决办法：

• GPU/CPU渲染切换断层：当模糊滤镜从非0值降到0时，浏览器可能会在两种渲染路径间切换——比如从处理模糊的GPU渲染切回普通CPU渲染，这个切换过程容易触发短暂的闪烁。
• 动画结束状态未固化：如果你的CSS动画没明确保留结束状态，浏览器可能在动画结束后“跳回”元素初始样式再修正，这就会产生闪烁感。
• 动态元素渲染时机问题：你用JS把文字拆成span动态插入DOM，如果动画触发时元素还没完全完成DOM插入，也可能导致渲染异常。

1. 触发GPU加速减少渲染断层 #

给每个.effect元素加个无关紧要的transform属性，让浏览器优先用GPU渲染它，能大幅减少切换时的闪烁：

.effect {
  /* 你的原有样式 */
  transform: translateZ(0); /* 轻量触发GPU加速 */
  backface-visibility: hidden; /* 避免部分浏览器的额外渲染异常 */
}

2. 明确固化动画结束状态 #

如果用CSS keyframes做动画，一定要加上forwards关键字，让元素在动画结束后停在最后一帧的样式，而不是跳回初始状态：

@keyframes fadeInBlur {
  0% {
    opacity: 0;
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.effect {
  animation: fadeInBlur 0.8s forwards; /* forwards是关键！ */
}

3. 错开滤镜与透明度的动画峰值 #

有些浏览器对同时动画filter和opacity的处理不够顺滑，你可以给其中一个动画加个极小的延迟，错开渲染压力：

.effect {
  animation: fadeIn 0.8s forwards, blurOut 0.8s 0.05s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes blurOut {
  from { filter: blur(8px); }
  to { filter: blur(0); }
}

4. 确保动态元素就绪后再触发动画 #

你用JS生成span的过程中，最好等元素完全插入DOM后再启动动画，用requestAnimationFrame能保证这一点：

var words = $(".sentence").text().split(" ");
$(".sentence").empty();
$.each(words, function(i, v) {
  var $span = $("<span class='effect'>").text(v + " "); // 记得加空格，避免文字粘连
  $(".sentence").append($span);
  // 等DOM更新完成后再启动动画
  requestAnimationFrame(function() {
    $span.addClass("animate");
  });
});

对应的CSS可以把初始状态和动画分离：

.effect {
  opacity: 0;
  filter: blur(8px);
  transform: translateZ(0);
}
.effect.animate {
  animation: fadeInBlur 0.8s forwards;
}

先试试前两个办法，大概率能解决你的闪烁问题～

内容的提问来源于stack exchange，提问作者Lavonen